Conflicting Z-Index in IE6

Internet Explorer 6 has an issue with positioned elements that use z-index. Here’s the trouble I just had with this:

I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…

However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.

PPK summarized this problem on his post: Explorer z-index bug:

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.

IE7 and more fun

According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke

More solutions

Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.

Yet another hack/update

I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6

Yet another hack/update 4-30-06

We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.

Reblog this post [with Zemanta]

IE7 – Good, Bad, and Ugly

On the Web Standards Group mailing list today, Stephen Stagg posted his list of IE7 updates and downdates. I thought it was well put and wanted to share it.

More informative Error Pages.
As a general usability feature, I thoroughly approve of the more friendly error pages in IE7. That way, when your site’s server goes down, people won’t just be dumped with a nasty pile of technical text.
Transparent PNGs
This is a good one, I can’t wait to begin using transparent PNGs, tho I can see lots of usability issues arising from sites mis-using them.
Default Font Size
The IE7 default font size seems a very small, even for me (someone who likes his font sizes at about 70%). Perhaps this will be changed in the final release, but trying to read the Register in IE7 using the default size is pretty taxing.
Zoom function.
M$ seem to be trying to cater for everyone by including both font size and overall zoom controls. However their zoom feature doesn’t seem to be as well implemented as Opera’s one and I have noticed lots of odd effects appearing while zooming.
Invisible Menu-bar
I know it’s not a WSG issue but: I like what they’re doing with the menus. By default, the menu bar is hidden, freeing up screen-space for the tabbar. However, when you press a standard menu shorfut (Alt- f for example), the menu magically appears and then hides again when you’ve finished. (You can turn the menu-bar back on if you wish).
Tabbed Browsing
Well this one was just waiting to happen. I’m not someone who expects my tabs to do lots of wonderfull things so I’m just happy that they’re included in IE7.

Stephen Stagg

IE7 Updates

The Microsoft team is still hard at work, trying to fix assorted rendering bugs before launch. While they deserved to be criticized for the sad shape of IE6, their work on IE7 also deserves some kudos. Granted, it’s not as good as Firefox and Safari, but it’s getting much closer.

Firefox search plugin for www.alistapart.com

Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

The javascript to install the plugin is now working.