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

Question

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.

Answer 1

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."

Answer 2

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