IE has notorious problems with the z-index positioning property. Z-index is supposed to allow the web developer to control the order in which page elements stack up.
I needed to overlap two elements and messed around with z-index and could not get the results I wanted in IE. I did not want to significantly modify the way the page was created, the page only had problems rendering in IE.
I turned to a very dirty solution to this, namely, JavaScript embedded in CSS.
Based upon this integrating javascript into stylesheets blog entry, I cobbled together some JavaScript embedded in a CSS file and my z-index woes disappeared (but it did make me feel slightly dirty!).
body {
background: url("
javascript:
document.body.onload = function(){
var xbutton = document.getElementById('xbutton');
if (xbutton) {
xbutton.style.zIndex = 9999;
}
}
");
}
Comments
This is the first solution to this problem I've found that didn't require moving the source around and using absolute positioning. But you're right - it does kind of make you want to take a shower. I wasn't even sure it was legal. *shudder* But thanks for the insight.
i am having the same problem with a site i am trying to compose.
your solution looks like it may be site-specific, so i was wondering if maybe you could email me and i could show you what im butting up against. i would definitely appreciate it, im tearing my hair out over this.
many thanks.
I'm struggling with this problem in making a widget for wordpress. I have a pop-up div that contains a google videoplayer. Problem being that I'm never sure what people have on their page, so it will fail, if they have an <object> somewhere close to the pop-up player. Check it out on my site and test by clicking one of the videos in the Google Videobar. Scroll down and watch the videoplayer being overrun by the object with another videoplayer. z-index for the pop-up div is 100.
is it working?
or i am doing something wrong
http://www.robertbolton.com/google-maps-and-cssjavascript-drop-down-menus
I've been very frustrated with this issue lately. I did try your fix, but it didn't work for me. However I kept messing around with my site in IE and came to realize that if I embed div tags **seperately** in tables (one per table) IE seems to auto order the zIndex correctly. Doing this worked in my particular case, but it also feels pretty dirty...
Nasty or not, but I was sooo despaired that I used it without any hesitation. Thanks a million!
nest both element in a relative positioned layer and change z-index.. Problem is one item relative other not. Z-index is ignored in ie...
Use JQuery.
Assign that element a css class of let's say 'rewt'.
Then in the $(document).ready() function, add in...
$(".rewt").css("z-index","100000");
Much cleaner.
Assign that element a css class of let's say 'rewt'.
Then in the $(document).ready() function, add in...
$(".rewt").css("z-index","100000");
Much cleaner.
Still doesn't work, though. Could it be because I have non-jQuery javascript controlling some objects?
I took your Jquery idea and applied it, and voila, it worked.
Showing it to the guys in the office, one of them said, "How about adding .rewt{ z-index:10000;} to the END of your stylesheet?"
We did, tested exhaustively with and without it, inside and out, and it did indeed work, without the Jquery.
