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!

2 Replies to “Crazy-ass CSS”

  1. Although tables are horrible to work with, at least they always display correctly. Sometimes I wonder if all the bother with css is really worth it. I think that it obviously is ifyou’re dealing with one browser-one platform, but what about situations like this? Have you had to use so many tricks to get it to work everywhere that you’ve completely lost the advantage of using it?

  2. Although tables are horrible to work with, at least they always display correctly. Sometimes I wonder if all the bother with css is really worth it. I think that it obviously is ifyou’re dealing with one browser-one platform, but what about situations like this? Have you had to use so many tricks to get it to work everywhere that you’ve completely lost the advantage of using it?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.