Can anyone help me with this annoying problem, i'm working on a new layout for my site and the page displays fine ie IE6 but the page is not displaying correctly in FF. http://www.buyingfirsttime.co.uk/template.php Thanks in advance.
Firefox is displaying correctly. It is IE that has screwed up the rendering. IE quite wrongly expands a container to contain its float children. Floats are not in the flow and should be unknown to its parent. You should never use IE as your primary testbed, and if there's a conflict between IE's rendering and Firefox's, assume Firefox is right and IE, wrong. It is very unlikely to be the reverse. There are correct ways to cause the parent to enclose its float child. One, which works in this case, is to give #container {overflow: hidden;}. You can remove the {height: auto;} as redundant and cluttering the stylesheet. See Enclosing Float Elements for more methods and some explanation. cheers, gary
Great explanation kk5st, but you have to think about 55% of visitors using IE. Really i'm on Firefox side, but i'm always trying to optimize my site for ie too.
The point is to learn how things are supposed to work. When coded correctly, it is trivial (once you understand what IE's doing) to hack, work around or simply dumb down for IE. Reread the referenced page. You will see, too, comments on IE's actions. IE7 has supposedly fixed the float thingie by making {overflow: hidden | auto;} set hasLayout. That's a stupid approach, but a patch MSFT is probably stuck with it until they rewrite their browser engine. Don't hold your breath. cheers, gary