Problem placing child behind parent elements with z-index

[Zonglars]

Hi, I’m currently working on a site for myself and I’m a bit obsessive about accessibility/graceful degradation features. One of them is my menu buttons; they use the background image swapping technique, with the text inside positioned underneath the parent anchor tag (the actual text is inside a span tag). This way, if images are disabled, it still looks nice.

I’ve gotten this to work across the browsers for my logo and nav buttons in the header (which is fixed to the top), but for some reason it won’t work on the header in my wordpress blog (actually, it works in FF and Safari, just not in IE, any version).

here’s a simplified version of the html for the header

Code:

Duality Designs

• Graphic
• Web
• Print

• About
• Blog
• Contact

and the code for the blog header

Code:

DD Magazine
Duality Designs New, Updates, and More

and the css

Code:

*{border:0; margin:0; padding:0; font-family:”Century Gothic”, Arial, Helvetica, sans-serif;}

html, body{min-width:650px; width:100%;}
body{background-color:#7f7f7f; position:absolute; z-index:-999; height:100%; font-size:16px; font-family:”Century Gothic”, Arial, Helvetica, sans-serif;}

#navheader{position:fixed; top:0px; left:0; min-width:650px; width:100%; color:#fff; height:100px; z-index:800;}
#navheader a:link span{text-decoration:none;}

/*logo styling*/
.logo{position:absolute; top:5px; width:70%; z-index:998; margin-left:0 !important; margin-left:-1px; text-align:center;}
.logo h1 span{font-size:32px; line-height:50px; z-index:-1; position:relative; text-transform:uppercase;}
.logo h1 a{background:url(logo.png) no-repeat; text-indent:6px; display:block; width:340px; height:50px; margin:0 auto; color:#7f7f7f; font-weight:normal; text-decoration:none;}
#bwhite{color:white; font-weight:normal;}
#bblack{color:black; font-weight:normal;}
.logo h1 a:hover{background:url(logo-hover.png) no-repeat; color:#7f7f7f;}
.logo h1 a:hover span{text-decoration:underline;}

/*navigation sections and links*/
#navheader .topleftshadow{position:fixed; top:55px; left:0; width:35%; height:10px; background:url(black-shadow2.png) repeat-x !important; background:none; z-index:820;}
#navheader .toprightshadow{position:fixed; top:55px; right:0; width:65%; height:10px; background:url(white-shadow2.png) repeat-x !important; background:none; z-index:820;}
.navleft, .navright{margin-top:65px; display:inline-block; height:30px; z-index:900; list-style:none;}
.navleft{width:100%;}
.navright{width:100%;}
#navheader li{display:inline;}
.navleft{background:url(fill-dark.png); color:#fff; text-align:right; border-top:#fff 2px solid; border-bottom:#fff 2px solid; position:absolute; left:0;}
.navright{background:url(fill-white.png); color:#000; text-align:left; border-top:#000 2px solid; border-bottom:#000 2px solid; position:absolute; right:0;}
.navleft a, .navright a{display:inline-block; height:30px; z-index:999; /*front most thing on the page*/ text-align:center; text-decoration:none;}
.navleft a{color:#FFF;}
.navright a{color:#000;}
.navleft span, .navright span{font-size:20px; display:inline-block; width:100%; height:100%; text-align:center; line-height:25px; position:relative; z-index:-1;/*behind parent element but still above the body*/}
.navleft a:hover span, .navright a:hover span{text-decoration:underline;}
.navleft a:hover{color:#000;}
.navleft a:hover span{background:#fff;}
.navright a:hover{color:#fff;}
.navright a:hover span{background:#000;}

/*page wrappers*/
.pagecontent{width:100%;}
.pageleft{float:left; width:35%; min-height:100%; text-align:left; color:#fff; position:absolute; top:0; left:0;}
.pageright{float:right; width:65%; min-height:100%; text-align:left; color:#000; position:absolute; top:0; right:0;}
#wrapper{margin:115px 40px 50px 40px;}

/*blog header*/
#header{width:100%; height:75px; text-align:center; border-top:1px solid #666; border-bottom:1px solid #666; position:relative; margin-bottom:20px; z-index:200; /*high in the stack but still under the navheader*/}
#header h1{z-index:100; line-height:28px;}
#header h1 a{display:inline-block; width:335px; height:75px; background:url(banner-norm.png) no-repeat; margin:0 auto; color:#000; text-decoration:none; font-weight:normal; position:relative;}
#header h1 a:hover{background:url(banner-hover.png) no-repeat; color:#000;}
#header h1 a:focus, #header a:active{top:0;}
#header h1 a span{text-align:center; position:relative; z-index:-1;}
#header h1 a:hover span{background:#141414; color:#fff; display:inline-block;}
#header h1 a:focus span, #header a:active span{top:2px;}
#blogname{font-size:28px;}
#bloginfo{font-size:16px;}

Like i said, the logo and nav buttons work properly, but the blog header still has the span tag above it’s parent anchor tag

anyone know what i’m missing?

EDIT: Okay, it works in IE8 now, apparently a little slip of metadata for the character encoding that wordpress put in was triggering quirks mode, this also solved another little problem in IE7, but 6 and 7 both still have the z-index problem

[Author]

Posts