Floating/Nested Div positioning fixes for IE6-9

[houseofgrays]

Hi guys,

I’ve done a lot of research on this topic and the bugs in IE when it comes to the box model padding/margins/etc, but I can’t seem to actually apply any of it to my layout.

Everything looks great in all browsers but IE6,7,8,9. All my floated divs in the header push the rest of the page down. I’ve checked the code in the W3 CSS validator, and there are some warnings, but mostly about image drop shadows, nothing I can tell about positioning.

http://www.houseofgrays.com/sse/index.html

I will admit that I have some tables in my layout (developer request for their CMS), but not in the header area.

Any hacks you recommend or does this require a conditional stylesheet? (Totally over my head based on what I’ve found in the archives here)

Thanks so much in advance!

Megan

[houseofgrays]

I actually was able to fix it in IE8 and IE9 using the “clear:both” method on the last child div in the parent div, based on this article: https://css-tricks.com/795-all-about-floats/

Still need a fix for IE7, and have decided to ignore IE6 because that one is OH MY GOD BAD. Sorry?… :(

[houseofgrays]

By the way, I work on a MacBook, so I’m using

This site to preview in diff versions of IE:
http://ipinfo.info/netrenderer/index.php

This is the page I’m previewing:
http://www.houseofgrays.com/sse/index.html

and IE7 is the one that’s killing me softly.

[Author]

Posts