Internet Explorer: CSS, z-index, and position

[gothwalk]

Originally published at Now Is A Long Time Too. You can comment here or there.

I spent a total of about 12 hours trying to get some oddities of CSS in IE - z-index and stacking order - to work as I wanted them to in Internet Explorer. Essentially, any block element in the code defines its own stacking context for z-index purposes, if it has a position set. So if you’ve dropdowns from a menu bar across the top, they’ll vanish behind any divs with position: absolute or position: relative defined later in your HTML source. And since those two are pretty nearly essential for any kind of layout, that causes problems.

The solution? Rearrange the code so the menu is in the html source after the content, and use CSS to position it correctly. Brute force and ignorance, yes, but it works. And it has the added benefit of placing your content further up the code for search engines, if you consider that important.

I award myself 100 DKP and a biscuit, and proceed to the next problem.

Comments

[smarriveurr.livejournal.com]

Well done. I remember wrangling similarly in a webdev course years ago, and yeah, it was pretty much the only solution available. And, bingo, I justified it to the prof with the "Content takes precedence over navigation" argument as well. So add another biscuit on my behalf. ;)

Of course, this was also the WD class wherein I rigged a "dynamic content" demo/"contract pitch" by altering pages on the fly while another member of my devteam presented. Prof caught up with me at the end of that one, said he'd decided not to dock the team because "[it] took massive balls, and it [i]looked[/i] seamless." He [i]did[/i] still force me to send him working code later, though, just to make sure I'd gotten the material. Loved that course. But now I'm rambling. Thinking perhaps I should have slept last night...

[dmh.livejournal.com]

I think it's also a benefit from an accessibility/screen reader poing of view -- reading out the actual contents rather than forcing someone to listen to the menu at the start of every page.