Crazy-ass CSS

Apparently, in Mac IE 5.2, <li> elements have a higher z-index than <div> elements. How did I discover this? Well, in the LCES project that I just finished, I use a nested list structure to create the navigation, which is all well and good. However, within each list element is a pair of floated divs – the first one holds the image, the second holds the text (this is because the bullets needed to be clickable, and the link title blocked-out).

On the Mac, however, the divs were getting lost behind child list elements, and generally looking wretched. I figured out it had something to with the z-index of the two, and once I had set rules to ensure that divs always appeared on top of list elements, everything showed up again.

The only problem was that while the menu now looked spiffy on most browsers, the entire menu had disapeared in IE for the PC. The reason for this was because in order to affect the z-index on the Mac, I had to give the list elements and the divs within position:relative styles. Which threw IE for a loop (they were actually showing up behind everything in the top-left corner of the page). So then I had to track down a method of showing CSS to IE for the Mac, but hiding it from IE for the PC. Fortunately, I had this CSS filter list bookmarked, and was able to fairly quickly scan down and find the right combo to do this. So now the menu works correctly in all tested browsers (the modern ones).

Whew! This one had gotten to the point that I was sorely tempted to say ‘fuck it all!’ and rebuild the menu in stacked divs, or worse yet, a table!