Entry

Feb22

Fun IE “Layers” Positioning

I’ve been working on some suckerfish dropdown menus at work and it’s been quite an experience. It’s not because they are hard to set up, or it was my first time working with them, but rather because I was trying to make a pretty damn good implementation that used all best practices in css, javascript, usability, business processes and what not. While I’ll probably put together a post into why it took me the better part of a week to create these menus, this teaser post is about a little annoying IE bug on positioning and z-indexes.

The z-index property will only affect an element if that element has been positioned. This allows for layering effects in css. In particular, the z-index will start laying elements strictly on the index which is given. Here lies the problem that I encountered with IE.

As with most suckerfish dropdowns, my styles looked a little like this:

	ul#nav li{
		position:relative;
	}

	ul#nav li ul{
		position:absolute;
		z-index:1000;
	}

Adding the z-index in the child UL’s ensures that the dropped menu remains visible over the rest of the page.

While all of this looks good in code, IE thinks different about the whole situation. I actually stumbled on this IE behavior due to some Flash content the dropdown UL’s were not layering over. Originally, I thought this problem was due to a lacking wmode parameter for the flash embed but the object had already been set with wmode as transparent.

My next step was to set the parent element of the flash embed to position:relative and specifically set a z-index of 1. Even if you aren’t a math person, surely you can see that 1 is less then 1000. This observation makes you that much smarter then even the latest child of Microsoft: IE 7. Apparently, in the environment the IE family resides in, 1 can be greater then 1000, as all the content in that relatively positioned element was layered over all the dropdown UL’s.

I removed the embedded flash, still nothing.

What’s left to do? See if someone else has had a similar problem. I was actually able to find some answers pretty quickly. As someone else had run into the same problem with dropdown menus. The answer is relatively simple. Because the relatively positioned LI in menu did not have any z-index specified IE proceeded to not layer the child elements as they had been set.

The simple fix: add the z-index to the LI.

	ul#nav li{
		z-index:1000;
	}

February 22, 2007 02:13 PM HTML and CSS

Comments

Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.





Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.