Forum Moderators: open
In my site editor, the site looks exactly how I want it to. When I look at it through IE7 and with AOL's browser, it looks like I want it to.
However, when I look at it on FireFox, the part where I have it set to show two images side by side, then under that I have two images side by side, etc. I have the images outlined in two colors, red and blue. The blue is around the images as it is supposed to be on FireFox, however, the outer red part is way up near the header and another red line behind one of the images.
Also, in FireFox instead of the images being two side by side images, they are all lined up underneath each other, no side by sides as I want and as it shows in IE and AOL.
I hope I described this correctly, however, it's kind of hard to describe.
Here is the code I am using for the images, I hope someone can tell me how to make sure it looks right in FireFox as well.
<center>
<div style="width:310px; height:165x; border:1px solid red; padding:5px; background:red;">
<a href="http://www.example.com/widgets1.html"><img alt="Example Alt" src="/images/example1.jpg" style="width:150px; height:150px; border:2px solid blue; float:left;" />
<a href="http://www.example.com/widgets2.html"><img alt="Example Alt" src="/images/example2.jpg" style="width:150px; height:150px; border:2px solid blue; float:left;" />
</div>
</center>
<p><b><center>Click on images to be taken to item shown.</b></center>
<br><br><br></p>
<center>
<div style="width:310px; height:165x; border:1px solid red; padding:5px; background:red;">
<a href="http://www.example.com/widgets3.html"><img alt="Example alt" src="/images/example3.jpg" style="width:150px; height:150px; border:2px solid blue; float:left;" />
<a href="http://www.example.com/widgets4.html"><img alt="example alt" src="/images/example4.jpg" style="width:150px; height:150px; border:2px solid blue; float:left;" />
</div>
</center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So, I tried it as transitional, still same problems.
Yes, I've gone through the w3c validator, but the errors it gives are ridiculous for some things. They show errors on things that I can see are right there. For instance, saying that the end of the word STREET has a T, they show the T as an error and it is not. Lots of errors like that.
I am using a CSS style sheet with this. Is there a DTD that works better?
Like I said, the site looks like I want it to on IE7 and AOL's browser. It does not look like it should in Firefox.
Any clues?
Have you tried explicitly setting padding and margins to zero for all the elements that are affecting this part of the layout?
