IE and Z-Index

Hey there!

When I look in IE6, there are a couple of things going on. The beta button is sitting on top of the menu on the left AND the menu is appearing behind the logo.

A couple of things:

1. IE simply detests positioning of items and that includes ‘fixed’. For a variety of reasons, reasonable and most likely not. Try using absolute positioning and apply a z-index to your beta button and see if that fixes its shifting and positioning problem in IE6.

2. z-indexing can ONLY be applied to elements that have been positioned.

In which case:

#menu  {
     background : #333;
     z-index : 2000;
}

is incorrect.

You can’t apply z-indexing to something that hasn’t been positioned.

You applied it to the LIST itself here:

#menu ul  {
padding : 14px 0 6px;
margin : 0;
list-style : none;
width : 147px;
display : none;
position : absolute;
left : 0;
top : 100%;
background : #e9e6dd;
z-index : 1000;
}

But not to the #menu.

AND:

#logocontainer  {
height : 100px;
width : 100%;
background : #fff;
}

Not on your #logocontainer either.

If I’m correct, Firefox was being ‘polite’ in forcing the z-index onto your #menu in itself by virtue of the list contained within, but IE says that #menu has no positioning applied and therefore potentially decided to apply the lack of z-index to the entire contents of the #menu and simply is rendering based on flow of items.

Currently, you have a lack of z-index on your menu container AND the logo container. For IE, the more ‘strict’ and particular you can be with it, the better. Lack of instructions (even ones that should be common sense) can make the browser choke and trigger its bugs.

Stack the items correctly and see if IE will fix itself out more. ??

Thanks for all the suggestions. I am correct in saying that you say I should remove z-index from any non-positioned elements and only including it on the ul#menu?

Also, I switched the position of the beta button to absolute rather than fixed. I lose the scrolling, but oh well.

As soon as I have access to IE, I will take a look to see whether my changes have worked.

Well, I tried what I think you suggested, and it hasn’t worked. Let me know if I didn’t do what you meant.

Another thing. IE (7) is reporting the following error:

Line: 2
Char: 167
Error: Expected ‘;’
Code: 0
URL: https://testing.bdrucker.com

The issue is, there’s no character 167 on line 2, so I have no idea what I should be looking for. Plus, the W3C validator return the site as valid XHTML Strict, so I doubt there are any syntax errors in the code.

your error is in line 2 char 167 of your menu JS

‘Error: missing ; before statement
Source File: https://testing.bdrucker.com/min/g=js
Line: 1, Column: 165
Source Code:
function initMenu(){var a=document.getElementById(“menu”).getElementsByTagName(“li”);for(var i=0;i<a.length;i++){a[i].onmouseover=function(){this.className+=” hover”}a[i].onmouseout=function(){this.className=this.className.replace(” hover”,””)}}}if(docume’

I’ve stopped supporting IE6 in my projects a while ago. I just add a browser-dependent message warring people to upgrade to a decent browser.

MAC

Thanks MAC for the help. I’ll go fix that right now. And I figured out the z-index. Since the original suggestion was that z-index could only be applied to a positioned element, I threw “position: relative” onto the #menu CSS. While it does nothing to the appearance, it makes the z-index work, at least in IE 7.

I am going to add a little message to IE 6 users telling them to switch to FFox or at least get IE7. While IE7 still has its quirks, it fixes the PNG transparency issue and lots of other incompatibilities.

Glad to see you fixed the issue and I’m sorry I neglected to mention the relative positioning in relation to the absolute positioning and z-indexing as it is part of the stacking process.

And IE6, amazingly enough, still has 15% of the market share in terms of browsers that people use.

To me, 15% is still enough of a percentage for me to code decently enough for IE6 browsers.

I looked at my stats for the past 6 months, and there was still around 10% on IE6. That made my decision for me. It took an extra hour or two, but now I have an IE6 specific stylesheet that can override the default. I wish I could just abandon IE6, but 10% is too much for me, especially since many of my customers aren’t updating their computers.

It’s your call. I rather try to influence users to upgrade then willingly cope with something that is not correct. Just take the giants as an example, YouTube now is abandoning IE6 support. They’re moving on.

-> EMG You can do it but PLEASE don’t call it “code decently”! decent code does not render well in IE6 ??

MAC ??

@fmacastro:

LOL! Good call on that one. ?? Will remember to clarify for the future as what you said is perfectly true. In the context of that particular post, ‘code decently’ specifically meant ‘code decently specifically for IE6’.

Additionally, the only reason I haven’t abandoned IE6 support is that in my experience, the people who usually run IE6 are on much older computers that won’t necessarily be able to handle ‘better browsers’.

For those people who can’t really help BUT use IE6, I give in and code my sites to be 99% IE6 friendly save for some must-have 32 bit alpha transparency PNG files.

… Maybe I should offer those people an old old old version of Firefox to download. I still have Firefox 1.X somewhere!

@emg now a silly question, im really not in to WP bureaucracy:

– Why do you have a link in your username and bendrucker or myself don’t?

MAc ??

I asked the same question before and came across a thread in the forums that addressed the issue. ??

Basically, since most people visit the support forums only to post a question and then poof out of existence (or post spam!) never to be seen again, the mods here on the forums have it set up so that links to users’ websites are manually approved after they’ve been here and stuck around for a little while.

Give it a bit more time and you’ll get your nice blue link, too, I would think as you’ve provided excellent support so far from what I’ve seen. ??

I can see how sites like YouTube and other sites like that that make their money off of ad revenue can abandon IE 6. More active YouTube users that net the site more ad revenue are very likely to be using a newer browser. Plus their average revenue/visit is much lower than mine. My 10% on IE is probably artificially low. I get lots of visitors from Twitter, various forums where my site is linked in my sig, etc. They’re not going to be potential customers of mine. So while it’s nice that they might link to me or something, they have virtually no value to me other than the aforementioned SEO help. Since that group is far more likely to be using Ffox or Safari, it probably drops my IE number lower than it should be. If I was a Google Analytics wizard, I could tell you by how much. Nevertheless, it’s probably ~10%.