IE CSS Hacks
I have been spending the last week or so attempting to make the project that I am working on cross browser compliant. This, of course, basically means babying Microsoft Internet Explorer 6 and 7 (though 8 seems, surprisingly, to recognize standards) into some semblance of compliance. It has been grueling to say the least, as there are in some cases several bugs on a single page, thus their symptoms have become hard to trace. That aside, I would like to share this post on www.positioniseverything.net, as it has been incredibly helpful in tracking down just what's going on. I am sure most of you have run across this, and it is most certainly not my first look at it, but over the past week I have found myself returning there again and again. Most of their other articles are worth a look as well.
So if your muscling through your stylesheets attempting to make all the browsers happy, may I suggest putting on a pot of coffee, dawning the reading glasses, and keeping this reference handy.
Feel free to vent any IE related curses at will...
Top Negative Margin
Well stumbled across a little bug in IE6 that's symptom isn't directly referred to in the above articles. It occurs when an element has a negative top margin pulling it up into an element above that has a background. Wen this occurs IE6 will render the element with the negative margin "behind" the element above it. Not too sure why this occurs, but I have found that a
position: relative;on the element with the negative margin will fix it.Very annoying and took me a while to figure out what was happening, so thought I would throw it up here.
z-index on Positioned Elements
Found another today that does not appear in the above articles. The issue came up when attempting as CSS drop-down menu. When the list drops below the menu on hover it is rendered "behind" the content below it. This is normal behavior as the content below the menu is being rendered later and therefore "over" the older content, the typical method to bring this menu forward is to add a
z-indexto the<ul>that is dropping down. IE doesn't like this however, and after much frustration I ran across this tutorial which gives a rundown of just what IE is doing (er... not doing) with indexes applied to positioned elements. Thank you Aleksandar!The skinny is that you will need to apply a
z-indexto the relatively positioned parent element of the drop down. In my case it was applied to a<div>containing my entire navigation menu. Very odd behavior...Post new comment