Sep 202011
 

Today I found a bug in the IE rendering engine that revolves around IE positioning and using filter’s to handle gradients. My issue was that I had a navigation component that contained a drop-down menu. These drop down menus weren’t showing up in IE for some reason. After many hours of debugging, I traced it back to a gradient I was using on the navigation element using IE’s filter definition.

Here is the rough HTML:

The CSS that was failing looked something like this:

The issue with IE 8 (and probably IE 9) is that the gradient definition of:

caused the drop-down menus to not show up correctly. After moving them around and using some visibility magic, I found that the drop-downs were actually getting clipped inside the outer UL element. Once I removed the filter it all worked fine.

Nov 182008
 

Found a good fix for this one as well. This will work on LIs or DIVs. Here’s how to do this in IE and FireFox:

The HTML looks like this:

Nov 182008
 

Took a bit of research, but the only way I could get rid of all the space between LIs in IE was to make the LI inline and the anchor tag within the LI a block like this: