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