Thursday, August 17, 2006

A nasty css hack solution to the IE z-index problem

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;
}
}
");
}

12 comments:

Mark McLaren said...

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.
Note: Comment imported. Original by Mike at 2006-10-11 19:59

Mark McLaren said...

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.
Note: Comment imported. Original by john at 2006-10-23 07:56

Mark McLaren said...

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 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.
Note: Comment imported. Original by Daiko website: http://www.daikos.net at 2006-11-10 22:56

Mark McLaren said...

is it working?

or i am doing something wrong
Note: Comment imported. Original by Anonymous at 2007-01-24 08:20

Mark McLaren said...

http://www.robertbolton.com/google-maps-and-cssjavascript-drop-down-menus
Note: Comment imported. Original by Anonymous at 2007-02-12 17:20

Mark McLaren said...

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...
Note: Comment imported. Original by Noah at 2007-04-20 18:09

Mark McLaren said...

Nasty or not, but I was sooo despaired that I used it without any hesitation. Thanks a million!
Note: Comment imported. Original by piachoo website: http://terappiaiteatr.yoyo.pl at 2008-04-23 19:57

Mark McLaren said...

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...
Note: Comment imported. Original by Anonymous at 2008-11-19 10:45

Mark McLaren said...

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.
Note: Comment imported. Original by Brett E at 2009-02-05 19:19

Mark McLaren said...

Still doesn't work, though. Could it be because I have non-jQuery javascript controlling some objects?
Note: Comment imported. Original by Anonymous at 2009-07-05 11:07

Mark McLaren said...

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.
Note: Comment imported. Original by DreamRaven at 2009-12-02 17:41

Mark McLaren said...

Great solution, thank you so much!!
Note: Comment imported. Original by Anonymous at 2009-12-16 16:05