semantic markup

Random Bugfixes for Internet Explorer 6/7

For the better part of two days, I was working on making a new design (currently here) for the Archstl.org website display correctly in Internet Explorer. There were a few bugs that took me hours to solve, so I thought I'd share here my solutions (note: 'good browsers = all browsers but IE').

Archdiocese of Saint Louis final design screenshot

Above: the final screenshot - I'll be working now mostly on little tweaks, and on porting this design to a CMS theme...

The z-index property - fine in good browsers, bad in IE

The first major problem I encountered was a bug in IE 6 and 7 - the 'mega menus' were appearing behind the jquery-enabled scrolling ads. I fuddled with z-index values quite a bit, and found a way to make the mega menus appear over the ads themselves, but the green arrow buttons were still appearing on top of the mega menus!

After a few hours of reading many different opinions of IE's support for z-index (or lack thereof), I finally found that the parent element of whatever div isn't being displayed correctly must also have a higher z-index than whatever you need to have appear behind it.

Subscribe to RSS - semantic markup