If anyone can give me help as to why my site (this one that you are currently viewing) breaks in IE 7 I will be so appreciative. I have finished my site only to bump into the evil that all CSS coders experience: IE hell. (09/02/09 Resolved: see bottom entry).

The problem is related to positioning, that I do know. In IE 7 the site loads correctly, all elements are in place, everything appears to be normal - except for one thing: expand or contract the browser window and the containers break apart from each other. I’m pulling my hair out over this. The site works fine in all standards compliant browsers, Webkit, Opera, Mozilla.

You will notice that the container of the site is supposed to sit below the banner and the navigation, is called .columnWrapper and has a position: relative. In IE it appears to rest at the top of the banner but the content is where it’s supposed to be - or is that the body element that the other containers are breaking free from?

Also, another buggy thing; the butterfly will not get above the navigation regardless of the z-index I assign to it. Any other little buggy things you may notice, I can tweak them.

Please, if you know what’s going on (assuming you’ve accessed my stylesheets) please use my comment form below to send me a message.

And…thank you!
~~~~~~~~~~~~~~~~~~
Resolved! Thanks to “Mikey” ThatWebGuy at this link. I’ve copied my entry to him below:

Hi Mikey,

I finally got around to focusing on my site that broke in IE, deciding to focus on versions 7 and above.
After reading your article here it dawned on me that I had “loose” html elements (elements outside any of the site containers) that in IE were being read as relative to the body, not the containers in the site. All the standards compliant browsers handled this without issues but in IE these elements separated as the browser window expanded or contracted.
The solution was to add a simple “wrap” right after the body tag and set it to relative. From that IE could tell the elements what to position themselves to I’m guessing.
Anyway, it works. I haven’t checked it on IE6 but I’m thinking not to worry about that.
Thank you for the reference to this article on Twitter, it was the trigger that I needed.
Regards,
Pete
Twitter: @pychap

As an additional note, for some reason the usual “blind” stylesheet designed to specifically call only IE browsers wasn’t working (“if gte IE 8” etc.), so I used StackOverflow’s suggestion of adding a “plus” + next to the usual * html call on my stylesheet to target just the non-behaving elements.
So it looks like this: *+html {foo:blah;}.