Z-index and Internet Explorer

Greetings,

I have noticed several drawbacks when using z-index with IE. Especially when an element is positioned relative and possibly is floated.

Is there a good article someone might recommend to answer my question ?

Thank you,

Mr. Alexander

I wrote extensively about it here in the reference. :slight_smile: There is an even more detailed explanation on [URL=“http://www.satzansatz.de/cssd/onhavinglayout.html”]Ingo’s site here.

Hi Paul,

thank you once again for your help.

I have recently worked on another project and even more shocking results came about when viewing in IE6: http://www.torontowebdesignexperts.ca/clients/hbpa

you mentioned the has layout fix which i will try shortly…

Is there a resource you may recommend that talks about these aspects in order to ensure a consistent, and no time wasting, way of implementing a website ?

Thank you,

Alexander

I didn’t notice anything badly wrong in iE6 on that page unless I’m looking in the wrong place.

Hi,

If you are talking about the inkastrans site above then the whole slider is missing in IE6 and al but the slider is missing in IE7.

I already gave you the fix for iE7 but you haven’t used it.

The fix for IE6 is much the same.


div#front-page-content,#front-page-slider-container { zoom:1.0}


Hello paul,

Are you able to let me know what is the logo not appearing in IE6 as it does with the rest of the versions ?

Thank you very much for your help,

Alexander

Hi,

IE8 looks ok to me but IE7 has elements missing so I assume you meant to say IE7:)

This is probably “haslayout” again as mentioned in my other post and you can test this out by adding the following code:


div#front-page-content { zoom:1.0}

If the errand items re-appear then you know that haslayout is the issue. You can either keep the proprietary code above as the trigger for haslayout but it won’t valididate but is 100% safe. If you want valid code then use one of the other haslayout triggers such as the correct width of the element.

See the css FAQ on haslayout for more information as this is a very common issue and you should always ensure that parent wrappers that hold complicated content have haslayout triggered. :slight_smile:

Greetings Gentlemen,

Today I noticed something completely strange.

One of our clients’ websites displays beautifully on all the browsers, including IE8, as per our testing but today when I provided training for them on their IE8 the websites was a mess, it was missing many elements on the page as if they were visibility:hidden. I strongly believe it has to do with context overflow and z-index. When I do a render test using a tool like: http://ipinfo.info/netrenderer/ it still shows up nicely.

The address is http://www.inkastrans.com.

Is anyone able to assist me with this request please ?

Thank you kindly for your help.

Alexander

That depends, what was your question?

Hi,
It sounds like you have ran into the IE z-index bug. It was fixed in IE8 so it really only poses a problem in IE6/7 these days.

IE6/7 incorrectly apply z-index: 0 to all positioned elements. The 2.1 spec says that positioned elements that are z-index:auto should remain z-index:auto unless explicitly changed.

To combat this bug the easiest thing to do is manually define your stacking order.

You can learn more about it here -
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://aplus.rs/lab/z-pos/

Here is a Vertical Nav with Overlapping Flyouts, there is no problem with the flyout sublists in IE6/7 until you begin to overlap them. That is when the bug shows up and creates havoc.

To fix it I manually defined the stacking orders like this -

#nav li.sub1,
#nav li.sub2,
#nav li.sub3,
#nav li.sub4{
    position:relative; /*establish stacking context for the AP'd flyout sublist*/
    z-index:4;
}
#nav li.sub2{z-index:3;}/*combat IE6/7 z-index bug with classes for stacking order*/
#nav li.sub3{z-index:2;}
#nav li.sub4{z-index:1;}

Thank you for the help, the following site is where my problem happens:

http://www.ezstreetcambridge.ca/

If you hover over the “About Us” a dropped down menu will appear. However, in IE7, IE6 and chrome it doesnt work properly.

Are you able to advice ?

Mr. Alexander

Hello Again,

I just found the solution to this problem. It happens when there is a flash movie and the drop down menu suppose to be on top.

If you would like to see how to fix it refer to this address:

http://www.dynamicdrive.com/forums/showthread.php?p=78244#post78244

Mr. Alexander

You can also find a discussion of the wmode solution in the sticky thread in the Flash Form.

Hello Paul, thanks for the information.

Another issue I have found is with IE6 on the following website that I am working on: http://www.vmmedicalcenter.ca/

This is extremely strange and I cant figure out what’s preventing it from displaying properly in IE6. The div#header is positioned relative and the logo and menu are positioned absolute. I tried abit more “advanced” as I know it works, or at least worked, in all browsers up to know and much more stable when it does work.

Are you able to give it a look in a normal browser and then in IE6 and give your professional opinion in the matter ?

I usually get it right and don’t have many means to “debug” in IE6. Is there a tool you may recommend to me ?

Thank you very much for your help and I hope to return a favor when you might need it as well.

Kind Regards,

Mr. Alexander

HI,

The problem in IE6 is threefold :slight_smile:

First you have an anonymous inline element hanging in mid-air and IE doesn’t like that. It needs a block element to hold the inline element.

Add the structure it desires:


<div id="header">
            [B]<div[/B]><a id="logo"  href="http://www.vmmedicalcenter.ca">Van Mills Medical Centre</a>[B]</div>[/B]

IE6 doesn’t like absolute elements when there are floats close by either. Sometimes this can be fixed by using clear:both on the absolute element of if that fails then move the absolute element to the end of the stacking context. In your case the clear:both is working as a fix.

IE6 is 1px out when using bottom or right for absolute elements when the distance covered is an odd number of pixels and therefore you need to offset IE6 by 1px.

Finally your #front-page element doesn’t have haslayout and is therefore totally unreliable as a parent container.

These are the fixes for the above.


* html ul#header-menu {bottom:-1px;clear:both}
* html #front-page{width:100&#37;}


The only way to deal with IE6 bugs is to have seen them before and remember them. 99% are haslayout issues but the rest are various and usually very odd so it pays just to keep your eyes open and remember as many as possible.:slight_smile:

Greetings Paul,

Thank you very much for your help, everything you mentioned seems to be working perfect.

I never knew about some of these issues before as these issues never came to my attention after creating dozens of websites.

Wishing you a great weekend and, once again, thank you for the help i really appreciate it.

Mr. Alexander