PDA

View Full Version : Div with links shifting back in GC and FF, works well in IE



Roelf
Mar 25th, 2010, 06:09 PM
Hi,

I have this set of divs, positioned over each other, using negative margins for the second div. The first div has a transparent background, set with opacity in css. The second div holds a bunch of links. This works well in IE, in GC and FF, the div with links is positioned beneath the background div, so the links cannot be clicked. I have tried using z-index in my css to correct this, but no success. Anyone who can help me fix this issue?

html and css both validate on w3c validators

The html (partly):


<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>de Stichting</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<div id="nonFooter">
<div id="navigation_bg"></div>
<div id="navigation">
<span class="nav"><a href="projecten.html">de Projecten</a></span>
</div><!-- end div navigation -->


</div> <!-- end div nonFooter -->


</body>
</html>

the relevant css:


#navigation_bg{
height: 45px;
width: 1024px;
margin: 0px 0px;
background: url("../images/menu_bg.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
filter: alpha(opacity=30);
opacity: 0.3;
z-index: 0;
}
#navigation {
padding-top: 10px;
padding-bottom: 0px;
height: 45px;
margin: -45px 0px 0px 0px;;
text-align: center;
font-size: 17px;
z-index:1000;

}

Excavator
Mar 25th, 2010, 07:43 PM
Hello Roelf,
Your using z-index wrong, it doesn't work on an element that's not either absolute or relative positioned.
It's not needed anyway. If you nest your divs instead of trying to bring the one back up with negative margins...
Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#navigation_bg {
height: 45px;
width: 1024px;
margin: 0px 0px;
background: #f00;
filter: alpha(opacity=30);
opacity: 0.3;
}
#navigation {
padding-top: 10px;
padding-bottom: 0px;
height: 45px;
text-align: center;
font-size: 17px;
}
</style>
<title>de Stichting</title>
</head>
<body>
<div id="navigation_bg">
<div id="navigation">
<span class="nav"><a href="projecten.html">de Projecten</a></span>
<!--end navigation--></div>
<!--end navigation_bg--></div>
</body>
</html>

Roelf
Mar 25th, 2010, 08:20 PM
Excavator,

Thanks for that. That almost works. The reason i have the background and the links in separate divs is, that the links should not be transparent. Now they are. Do you have an idea to overcome that?

Roelf

Excavator
Mar 25th, 2010, 09:44 PM
Hey Roelf,
Sorry about that, I didn't really look at what you were doing or what I'd turned out. You were headed in the right direction the first time.

In the below example,
#box is the containing div
#navigation_bg is the transparency - it's absolute positioned so it's removed from the natural flow of the document
#navigation is positioned relative to #box and has no background so you can see the transparency behind it.
#span may or may not be needed. Right now, that would work fine as an id on the anchor.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
background: #fc6;
font: 100% Tahoma, Geneva, sans-serif;
}
#box {
height: 45px;
width: 1024px;
margin: 30px auto;
position: relative;
}
#navigation_bg {
height: 100%;
width: 100%;
margin: 0px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background: #f00;
filter: alpha(opacity=30);
opacity: 0.3;
}
#navigation {
padding: 10px 0 0 0;
position: relative;
top: 10px;
left: 10px;
z-index: 2;
text-align: center;
font-size: 17px;
}
</style>
<title>de Stichting</title>
</head>
<body>
<div id="box">
<div id="navigation_bg"></div>
<div id="navigation">
<span class="nav"><a href="projecten.html">de Projecten</a></span>
<!--end navigation--></div>
<!--end box--></div>
</body>
</html>

Roelf
Mar 26th, 2010, 01:38 PM
Excavator,

Thanks for your help. The first post helped me out, because i tried to put the relative positioning for both the divs in my css. Now it works.

And i have learned something, that is even better.

Thanks again,
Roelf