Problem with z-index in IE

kuvik · 04-25-2007, 04:10 PM

I use negative z-index value to put image to background, but IE don't render it (FF renders it right).

My CSS for example:

Code:

#background_art{
	width: 520px;
	height: 280px;
	position: absolute;
	z-index: -1;
	background-color: #FAFAD2;
	margin-top: 180px;
	margin-left: 476px;
}

Is there any solution to solve IE failure?

rmedek · 04-25-2007, 04:45 PM

Don't use a negative index. Use a higher positive index on the object you want to bring in front of #background_art.

Or, make #background_art a background image rather than a foreground element.

koyama · 04-28-2007, 10:11 PM

Quote:

Originally Posted by kuvik

I use negative z-index value to put image to background, but IE don't render it (FF renders it right).

IE supports negative z-index. (although IE suffers from other z-index bugs.)

It is Firefox 2 that renders elements with negative z-index wrongly. See comparison chart.

However, I checked Gran Paradiso alpha release 2 (Firefox 3) and the bug seems to be fixed.

According to CSS 2.1 Appendix E2, elements with negative z-index can never be placed behind the background of the stacking context (although it is stacked below the contents).

Example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>z-index</title>
<style>
body {
	background: orange;
	color: black;
}
#one {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: yellow;
	width: 100px;
	height: 100px;
}
</style>
</head>
<body>
The yellow box must show behind the text and above the orange background.
<div id="one">
</div>
</body>
</html>

felgall · 04-28-2007, 11:30 PM

Browsers are not required to support negative indexes and so they can be considered the equivalent of not specifying an index at all in those browsers that don't have a proprietary add-on to support them.

koyama · 04-28-2007, 11:44 PM

Quote:

Originally Posted by felgall

Browsers are not required to support negative indexes and so they can be considered the equivalent of not specifying an index at all in those browsers that don't have a proprietary add-on to support them.

Hmm... never heard about that. Can't seem to find the reference that browsers aren't required to support negative z-indexes?

04-25-2007, 04:10 PM	PM User \| #1
kuvik New Coder Join Date: Apr 2007 Posts: 14 Thanks: 0 Thanked 0 Times in 0 Posts	Problem with z-index in IE I use negative z-index value to put image to background, but IE don't render it (FF renders it right). My CSS for example: Code: #background_art{ width: 520px; height: 280px; position: absolute; z-index: -1; background-color: #FAFAD2; margin-top: 180px; margin-left: 476px; } Is there any solution to solve IE failure?

04-28-2007, 11:30 PM	PM User \| #4
felgall Senior Coder Join Date: Sep 2005 Location: Sydney, Australia Posts: 2,276 Thanks: 0 Thanked 23 Times in 22 Posts	Browsers are not required to support negative indexes and so they can be considered the equivalent of not specifying an index at all in those browsers that don't have a proprietary add-on to support them. __________________ Stephen Helping others to solve their computer problem at http://www.felgall.com/ Web related ebooks and software - http://members.felgall.com/ Focus on Javascript - http://javascript.about.com/

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

04-25-2007, 04:45 PM	PM User \| #2
rmedek Senior Coder Join Date: Nov 2003 Location: Minneapolis, MN Posts: 2,877 Thanks: 2 Thanked 65 Times in 56 Posts	Don't use a negative index. Use a higher positive index on the object you want to bring in front of #background_art. Or, make #background_art a background image rather than a foreground element.