IE8, XHTML, position: fixed; and z-index.

views:

330

answers:

IE8, XHTML, position: fixed; and z-index.

I have an XHTML 1.0 transitional Doctype.

I have a <div> that is position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 200;.

Inside that <div> I have two buttons which are position relative, aligned right, with a set z-index of 201;

In Firefox the bar at the bottom and the two buttons are correctly located at the bottom.

In IE8 however, the bar is visible and the z-index appears to be overlaying the other content, but the buttons are hidden behind the main div, despite being children and having their z-index set.

I'm using the following meta tag; <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force the document into IE8 mode.

If I emulate IE7 (put on compatability mode), the bar and buttons work just fine. I don't understand how IE7's rendering is better than IE8. I don't want to have to force compatability mode due to other things that IE7 cannot render and IE8 can. Is there another solution, or have I missed something?

Thanks.

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

try giving the parent element a higher z-index number(it does assume that you have a separate stylesheet for ie though)

Also, try using this doctype to force the rendering to ie8 standards compliant mode as opposed to using edge(which means you get the newest version always)

more info here: http://www.alistapart.com/articles/beyonddoctype

"That’s because even Eric Meyer can’t predict layout or scripting bugs that may be accidentally introduced by a new browser version."

corroded 2010-06-02 11:18:02

The container has a z-index of 200; I've tried removing the z-index of the buttons completely and get the same result. If I make the container position relative, the buttons show just fine. Position absolute and fixed make the buttons disappear under the container.

Joel 2010-06-02 11:28:15

maybe part of it is that ie also fails at position fixed(but i know this is only for ie6) why not just set the positions of the buttons and parent to absolute(instead of the buttons being relative) then setting the z-index? (also read the comments from the link, there are some other scenarios there that might be of help)

corroded 2010-06-02 11:32:53

I need the bar and buttons to maintain their position at the bottom of the viewport, not at the bottom of the page, which is why they're position fixed. That article is saying it's a bug in IE7, however my scenario works fine in IE7, but not in IE8 :/, I'll read through the comments and report back if I find anything useful.Thanks

Joel 2010-06-02 11:42:22

as said in ALA, even eric meyer is reluctant to use the IE=edge doctype since it may introduce bugs as a new version is released. to force your doc to use ie8(which means according to standards), use this instead: <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

corroded 2010-06-02 11:46:35

Thanks, I have updated the meta tag to that. Still no luck however. I still don't understand how it can work fine in IE7(mode) but not in IE8.

Joel 2010-06-02 11:52:16

what is your doc type btw?

corroded 2010-06-02 11:53:48

maybe you can try this? http://www.webmasterworld.com/css/3969095.htm

corroded 2010-06-02 12:37:21

I have solved the issue by taking the buttons out of the container/bar, and positioning them fixed themselves. Works in IE7,IE8,Fireox - Chrome doesn't like doing 100% on the position: fixed; bar. Damnit.

Joel 2010-06-02 14:15:03

ansaurus

tags:

views:

answers:

IE8, XHTML, position: fixed; and z-index.

related questions