...

View Full Version : Problem using Z-Index in IE7



daemonkin
03-06-2009, 03:49 PM
Edwin Brown (http://www.edwinbrownmusic.com) is looking and acting fine in FF3.

I opened it IE7 and have lost my navigation.

CSS:


div#navigation {
width: 800px;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 224px;
background: #fff url(/images/nav_bg.jpg) repeat-x;
z-index: 1;
}

div#site_wrapper {
width: 800px;
min-height: 321px;
margin: 0 auto 0;
color: #fff;
overflow: auto;
margin-top: 61px;
padding: 0;
background: #000 url(/images/site_bg.jpg);
z-index: 5;
position: relative;
}

Any help appreciated.

D.

daemonkin
03-06-2009, 04:12 PM
Hacked at it and it seems to work now in IE7.

Had to put in ie7.css stylesheet and ie6.css stylesheet:


div#content {
background: url(/images/content_bg.jpg) no-repeat;
width: 800px;
min-height: 300px;
padding: 0 10px 0;
overflow: auto;
w\idth: 780px;
margin-top: 61px;
}

to be able to see my navigation bar. If anyone else can figure out a better solution please post.

D.

SB65
03-06-2009, 04:26 PM
I haven't looked through the code in detail, but I think it might be the absolute positioning on your navigation div that's causing the problem.

SB

Excavator
03-06-2009, 06:51 PM
Hello daemonkin,
It does seem absolute positioning usually causes more trouble than it cures (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/). I stay away from it untill it's absolutely needed.
There is no reason for your menu not to work cross-browser. I hate browser specific CSS as much as AP.

Try this instead, quoted only the CSS I changed -
body {
background: #9a7737 url(/images/site_bg.jpg) repeat;
font: 70% verdana, serif;
color: #000;
}
* {
margin: 0;
padding: 0;
border: none;
}
#site_wrapper {
width: 800px;
margin: 61px auto 0;
color: #fff;
overflow: auto;
z-index: 150;
position: relative;
}
#navigation {
background: #000;
height: 61px;
background: #fff url(/images/nav_bg.jpg) repeat-x;
}
ul#nav {
width: 900px;
list-style: none;
margin: 0 auto;
}
#home, #bio, #news, #events,
#media, #blog, #download {
display: inline;
float: left;
}
ul#nav li#home{width:297px;}
ul#nav li#bio{width: 57px;}
ul#nav li#news{width: 114px;}
ul#nav li#events{width: 94px;}
ul#nav li#media{width: 77px;}
ul#nav li#blog{width: 80px;}
ul#nav li#download{width: 99px;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum