[thelist] z-index trauma

Symeon Charalabides symeon at systasis.com
Sat Feb 5 19:42:38 CST 2011


Hi Kevin,

> I am having a huge amount of problems regarding the way IE7 is not
> accepting/recognising my z-indexes. Please have a look at
> http://www.ratking.co.uk/m-and-s/wine.html and click on the link below
> the pictures, see if there is anything glaringly obvious. The 2 major
> problems, I think, have been avoided, the page has Layout and I tried
> making every div have a greater z-index that its parent but that screwed
> up Safari.
> I always thought z-index was such an easy concept to grasp, now I'm not
> so sure. Can anyone show me the errors of my ways?

The problem here isn't the z-index per se but rather the fact that 
IEstupid uses a HTML element hierarchy inverse of that of good browsers. 
That is, later siblings overshadow earlier ones. So, .wine_box_text 
belonging to wb{x} will always appear under wb{x+4} when wb{x+4} is 
relatively positioned.

Since all your dimensions are hardcoded anyway, your best bet is to 
declare all wb{x} elements as absolutely positioned and arrange all 
z-indexes as per your needs. The alternative way involves CSS magic that 
makes the 1st row of boxes in the HTML appear as the 2nd row on the 
browser, which is very, very messy.

Also, you can combine the lines

$(".wine_box_text").hide();
$(".toggle_text_red").click(function(){
	$(this).toggleClass("active").next().slideToggle("slow");
	return false;
});
$(".wine_box_text").hide();
$(".toggle_text_white").click(function(){
	$(this).toggleClass("active").next().slideToggle("slow");
	return false;
});

into

$(".wine_box_text").hide();
$(".toggle_text_white, .toggle_text_white").click(function(){
	$(this).toggleClass("active").next().slideToggle("slow");
	return false;
});

Hope this helps,

-- 

Symeon Charalabides (cosmopolite trainee)
-----------------------------------------
http://www.systasis.com
http://twitter.com/bluesymeon
http://www.linkedin.com/in/symeon



More information about the thelist mailing list