Z-index/absolute positioning issue (links dont work) [Archive]

chaser7016

03-30-2009, 10:22 AM

Hi

Recently I had this same issue in all non IE browsers and fixed it by adding z-index: 106 to the classes (Issue is Im not able to click links resting within a png.)

Now Im having this same issue in IE6 and trying to fix doing the same thing and others to get these links on pngs to click, but no luck yet!

Below is code Im working with..

HTML

<div id="nav">
<ul>
<span style="position: relative; top: 18px; left: 0px; color: rgb(87, 175, 237); font-size: 96.8%; z-index:200;">
<span style="color: white;">Prefer</span>
a quarter? Click
<a style="color: rgb(255, 255, 255);" href="google.com">here!</a>
</span>

</ul>
</div>

CSS

#nav {
background:url(../images/nav.png) no-repeat;
display: inline;
position:relative;
top: -12px;
right: 30px;
width: 350px;
height: 75px;
z-index: 106;
font-size: 97.8%;

}

Before I had both absolute, so changed them to both relative, but still no luck. I even did one absolute and one relative and still no dice.

Appreciate any suggestions one can offer!

cheers!

Excavator

03-30-2009, 05:37 PM

Hello chaser7016,
It's kind of hard to tell what your trying to do here. Your .png should not interfere with your liinks function at all since it's just a background image.

Check your code in the validator though and you'll see a few problems.

Start with something like this, it's valid anyway and maybe you can adjust it to fit your application.
<!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" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 800px;
height: 600px;
margin: 30px auto;
background: #999;
}
#nav {
width: 350px;
height: 75px;
float: right;
margin: 12px 30px 0 0;
background: #fff url(../images/nav.png) no-repeat;
position:relative;

}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {color: #fff;}
#nav a {color: rgb(255, 255, 255);}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><span>Prefer</span>a quarter? Click<a href="google.com">here!</a></li>
</ul>
</div>
</div>
</body>
</html>