Z-Index problem in IE8 (and maybe in IE7, IE6)

Hi

In the coding below I want the red part to be behind both the image (see attached) and the title text (the latter white writing on a green background).
It works fine in Firefox, Safari and Chrome but in IE8 (I haven’t been able to try IE6 and IE7), the red part is in front of the image (but it is behind the title text).

I have searched the web for suggestions re IE bugs and applied what I could find to no avail (or else being new to z-index I have misunderstood the ideas).

Any help would be appreciated - both for IE8 and for IE7

Thanks

<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” >
<head>
<title></title>
<style TYPE=“text/css”>

	#page-desc {		
	z-index: 100;
	}		
	
	#page-image img {
	border: 0;  			
	display:block; 				
	margin: 15px auto 0px auto;
	text-align:center;     /* maybe needed for IE */
	z-index: 50;
	}		
	
	#page-title {
	background-color: green;
	color: #FFFFFF;
	font-family: "Courier New", monospace;
	font-size: 110%;
	font-weight: bold;
	margin: -30px 0px 0px 30px;         /* left margin here to equal right margin of page-title-shadow */
	padding: 1px 0px 3px 0px;
	text-align: center;
	text-decoration: none;
	z-index: 40;
	}
	
	#page-title-shadow {
	background-color: #ab9c89;
	background-color: red;
	font-family: "Courier New", monospace;
	font-size: 110%;
	font-weight: bold;
	margin: -15px 30px 0px 0px;      /* right margin here to equal left margin of title */
	padding: 1px 0px 3px 0px;
	z-index: 30;
	}		
	
	#sidebar-left {	
	width: 180px;
	}


&lt;/style&gt;

</head>
<body>

&lt;div id="sidebar-left"&gt;
	&lt;div id="page-desc"&gt;
        &lt;div id="page-image"&gt;
        &lt;img src="image/shield.gif" width="76" height="70"
                     alt="shield"/&gt; &lt;/div&gt;
        &lt;div id="page-title-shadow"&gt;&nbsp;&lt;/div&gt;	
        &lt;br/&gt;
        &lt;div id="page-title" &gt;Shield&lt;/div&gt;	
        &lt;br/&gt;                  	    	
    &lt;/div&gt;
&lt;/div&gt;

</body>
</html>

Hi, unable to test ATM, but you have an XML declaration above hte doctype which forces IE to be in quirks mode. Remove the stuff above the doctype :slight_smile:

Thanks for pointing that out.
I read somewhere it was good practice to have it (I am converting an old existing site to XHMTL and learning CSS in the process)…

Unfortuneately it doesn’t cure the problem.

Hi

While experimenting I have found another facet of my problem .
What I am after is the red to be at the back, then the image on top of that and then last of all the title text on top of the other two.

However the way I have coded it even in Firefox the image is on top of the title text. This can be seen by changing the margin in #page-title from
margin: -30px 0px 0px 30px;
to
margin: -40px 0px 0px 30px;

Thanks Again in advance

You are using z-index, but it’s not even taking effect anyway: your elements aren’y positioned (or I missed it somewhere?). Only positioned element can even have a stated z-index. Positioned here means either position: relative or absolute (of course, relative would be better since you still want elements in the flow).

Margins can imitate the same thing because code who comes later in source, if pulled back UP the page (towards the top), will sit atop the stuff generated by the earlier code.
Later code has a higher stacking context.
*edit Hm, that last sentence might not be true, but that’s the effect you see visually anyway.

Thanks for the comment about positioning - it is now working in Firefox!
But dreadful in IE8 - I will have a go at it tomorrow.

IE8 seems to be ok but IE6 and 7 are broken.

As Stomme said above only positioned elements can have a z-index applied so you need to do this.


#page-title-shadow{position:relative;z-index:1}
#page-image{position:relative;z-index:2}
#page-title{position:relative;z-index:3}


For IE6/7 you also need to give the element a layout (see “haslayout” in the css faq).

Add this:


#page-title-shadow,
#page-image,
#page-title{zoom:1.0}

Don’t use breaks to make space when you could simply use the margin on the existing div instead.

It looks like you could have combined some of those divs to make more succint code rather than adding empty elements. Where possible apply image to the existing elements rather than adding extra empty elements - although I can’t tell what effect you really want so you may occasionally need extra elements.

Remove the xml declaration as it throws IE6 into quirks mode. It is optional in “fake xhtml” anyway so remove it.

It would have been good practice, if XHTML had gone anywhere in all browsers. Unfortunately, the w3c still lists the xml prologue-thingie on their Doctypes page (and so far as I remember there is no mention of this being a bad thing if the page is actually sent as HTML).

When it was first unveiled, people were encouraged to have it. It was supposed to be The Future. Flying cars were just around the corner. They never came.

Can you have a corner in the sky :slight_smile:

They huddle behind the tops of skyscrapers and lie in wait for their prey. Didn’t you see Attack of the Monster Killer Flying Cars??

Thanks for the solution to this.
Apologies for not replying earlier - my other job took all my time.