Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

z-index does not render in IE, but does alright in FF and Op

Have included a link to problem page...



8:19 pm on Mar 21, 2007 (gmt 0)

5+ Year Member

Hi all,

I'm having a big headache over this as everything seems to be right standard-wise with both XHTML and CSS. The page has validated on W3C.

You can see the problem for yourselves:

<url removed>

The page renders fine on Firefox and on Opera, but fails big time on IE6. I haven't tested it on IE7 - don't quite see the point to test it there if it fails with its older brother.

Nearly everything on the header is sitting on it's own z-index as the layout became quite complex to accommodate everything on the same "layer" as some say. So it's difficult to post the code here. However I can paste in some if it proves very difficult to understand where the problem lies.

The one thing all z-indexed divs have is that they are all above "10000" and they are all positioned as "absolute". There is a couple of divs there that are just put in between to clear both. Like that:

<div class"clr"></div>

.clr {clear: both;}

So it could be a combination of both problems, however there are no z-indexed divs sharing the same number, nor having "clear:both" as a property. Clear both is only called exclusively in that simple "clr" class.

One has, of course, to see it in both Firefox and IE to understand the pain... :P

The site hasn't gone live yet (for obvious reasons...)

Appreciate any advice!

[edited by: encyclo at 8:22 pm (utc) on Mar. 21, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]


8:32 pm on Mar 21, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I do not believe that IE6 and before properly support z-index. I could be wrong about this.


9:43 pm on Mar 21, 2007 (gmt 0)

5+ Year Member

Oh, I didn't know about not posting URLs. It is allowed, as I read on the Post Code Help, there are ubb codes for URLs... I don't think it was self-promotion as the site is not rendering right yet. But I respect the moderation's judgment.

Well, then it's going to be quite challenging to show what is wrong in the site without that. Can I attach a screen-shot of what is happening in both FF and IE then?

No, I don't expect IE to cope with z-index seamlessly (in fact, nothing at all) - really, but there should be some way around this...?


10:13 pm on Mar 21, 2007 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

To my knowledge, IE6 supports z-index on most elements -- with one exception being <select>. If you are using z-index on block level elements it works very well in almost any relatively recent browser.

But you may need to change your overall thinking about html - and really comprehend that it's not a layout program, it's a mark-up program. I wrote a post about this several years back - [webmasterworld.com...]

I find few reasons to use z-index since I came to this understanding, and especially not to use many z-index placements on one page.

Also, any integer "should" work for a z-index but you might do better using somewhat lower numbers. You can't possibly have 10,000 differently positioned elements on one page, right?


10:22 pm on Mar 21, 2007 (gmt 0)

5+ Year Member

I only started from 10000 because it seemed to cheat IE to show it right in some cases. But I don't know why or how, just read it somewhere.

As to avoid using the z-index, I would if I new how to apply the layout exactly to what I had in mind. They are the only way I know to puzzle it together, but I'm glad to use an alternative if someone here helps me think out of the box.

What upsets me is that it should work, as you said. I'm not using obscure select tags or anything like that. As I said everything is fine in FF and the page has validated.

[edited by: tedster at 4:37 pm (utc) on Mar. 22, 2007]


10:24 pm on Mar 21, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

I do not believe that IE6 and before properly support z-index.

I had not realised this, IE6...? Although, admittedly I've only used it when I've really had to - and not had too much of a problem on positioned elements.

There is certainly a difficulty in getting Flash objects to stay behind - they always seem to love being on top! And IE6 does have a problem with select boxes staying 'on top' too (although the Flash does cover it). And there is a workaround (for the select box) using an Iframe.

I had an interesting side-effect in FF2 recently... an absolutely positioned transparent DIV (opacity:0.1) on top of a Flash anim, actually saw through the Flash anim to the page underneath!? Like you were wearing X-ray specs!

You also mention a clearing DIV...? You're not trying to clear absolutely positioned elements are you?

My only other thought is that "10000" seems rather high. Is "100" not enough?

Well, then it's going to be quite challenging to show what is wrong in the site without that. Can I attach a screen-shot of what is happening in both FF and IE then?

Try breaking the problem down to it's fundamentals and post the code - you may even discover what the problem is in trying to do that. The number of times I've striped out a bit of code that I was convinced was causing the problem, only to find that the problem was still occurring! And be verbose in your descriptions... erm, what actually is the problem? :)


10:53 pm on Mar 21, 2007 (gmt 0)

5+ Year Member

tedster, I do agree with you that HTML was never meant to become what it did become, but it did. It has gone beyond it's own purpose and it stood on a verge of total incompatibility mess for quite a while until w3c came to the rescue. To this day, it's still the browsers that govern the experience of the end user, and us webdesigners have but to swallow their limitations.

Even though there are recommendations and guidelines one should follow while using HTML, I think everything is valid as long as one keeps it validated to the standards. We are creative beings, full of colors, shapes and inspiration to express in various forms - and I don't see the internet as an exception. On the contrary.

I believe that as technology advances and the hardware/software becomes more accessible, internet will play such a role in our lives that it won't be enough to just have some text put into square boxes kept to a minimum. I do agree with you technically, but disagree as a designer who likes freedom of expression. As webdesigners, we can't be arrogant to assume that everyone will fall into some boring web 2.0 layout just because WE believe (and know) its better for everyone.

But thanks for the thought, I might have to think out of the box and redesign the whole header to the site. It's a pity though, because I was starting to like it. I just wish someone could drop me a line with a hack to this problem, if there's such a thing.



10:58 pm on Mar 21, 2007 (gmt 0)

5+ Year Member

Thanks for the advice penders,

I'll break it down, yes. But I'll have to come back here tomorrow. It's quite late now and I'll have an early start.



4:45 pm on Mar 26, 2007 (gmt 0)

5+ Year Member

Sorry for the delay... I did most of the work this weekend, but only came from work now :P

Yes, breaking up the code took quite sometime but was worthed. Now the CSS is split into three: one standard, one for IE6 and one for IE7. The standard CSS is now very neat and well commented. Took ages for me to comment out every bit until I found the bugs. There was hardly any change in the HTML itself...

Thanks for all who gave their feedback!


12:27 am on Mar 27, 2007 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

hate to sound like a real bore on the subject, but hasLayout plays a very big part in IE's z-index problems.

It is recommended (for hasLayout errors) that anytime position: relative; is set on an element then also hasLayout should be set to "true" - and vice-versa. While that is a general safety net it causes the biggest problems if z-index is important! (and when some editors set position: relative on everything it can get a bit messy)

as soon as you set position relative on an element you are making it into a containing block (for further positioned elements) and as long as there is not a actually a z-index value attached to it it should not create a new stacking context... however in IE things don't always go to plan do they ;) so if you're following one set of rules to try and avoid hasLayout errors or are simply overusing position relative it may go horribly wrong.

While I agree with what tedster says in general, I had occasion to position an admin/login link to the the top/right corner of a page, it wasn't necessary in a text/aural/se capacity - so it appeared at the end of the HTML.. why oh why then was it so hard to get it to nest in the header, yet still be hoverable over?

z-index wouldn't be there if it weren't necessary.. imo


[edited by: SuzyUK at 12:31 am (utc) on Mar. 27, 2007]


6:10 am on Mar 27, 2007 (gmt 0)

5+ Year Member

Hi again,

I don't mean to feed, but thought that I might explain what was the problem so you understand.

I made a header for a comunity site that's built on a open-source cms. I wanted the header to give the users the possibility to do various things, from logging in and out to going to whatever page the user could contribute with content itself. So the header is the heart of the site. But I needed to give logged in users access to an user menu and other things, at the same time hide the same stuff from non-registered users. I needed flexibility of positioning, and didn't want to use tables.

So z-index was the only solution.

The problem was that all the z-indexed divs were not showing on IE. All these divs were nested in a div called "header". But the header was nesting a banner and a suckerfish menu as well. The z-indexed layers did not show until I took the banner and menu out of that div. I also reduced the number from the z-index to small values "2,3,4..". The new CSS sheet for IE came only to fine tune the layout to the pixel, so both renderings look nearly the same. There were issues with "clear:" within that header div, which disappeared when I left only the z-indexed divs + 1 regular div in there.

I use it quite sparsely, but this time I badly needed z-index. I is working in IE as expected... :)


Featured Threads

Hot Threads This Week

Hot Threads This Month