Forum Moderators: not2easy
Below the header div is a content div. Now, no matter WHAT I do, I cannot access links within the content div that are in the area of the header div.
Lost?
The header div has a links bar across the top that is approximately 30px high. It also has a logo off to the left that is about 200px high. The header is absolutely positioned with a transparent background. Thus, the content div beneath it with no positioning appear just below the links bar and to the right of the logo. The links in the content div the are above the bottom of the logo cannot be clicked.
Here's what I tried.
I tried giving the content div a z-index of 20. Its higher than either of the z-indexes within the header div AND higher than the sum of those z-indexes. No go. I tried making the content div position relative. Then, of course, the header div disappeared, but I could indeed click on the links.
Yes, the html and css do validate.
Here's the relevant css and html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<title>Widgets</title>
</head>
<body>
<div id = "lback"> </div>
<div id = "main" align = "center">
<div id = "container">
<div id = "header">
<table cellpadding = "0" cellspacing = "0" border = "0">
<tr>
<td class = "aligntop"><img src="http://www.widget.com/images/logo.jpg" width="167" height="204" border="0" alt=""></a></td>
<td class = "aligntop"><img src="http://www.widget.com/images/horizontalbar.jpg" width="590" height="7" border="0" alt=""><div id = "nav2"><a class = "marginrightmedium">Home</a><a class = "marginrightmedium">Products</a></div>
</td>
</tr>
</table>
<div id = "contentdef">
<div id = "leftspace_support">
<p class = "boldtext">Search Support</p><FORM method="POST" action="/scripts/dosomething.pl" class = "search">
<p<INPUT name="KEYWORDS" type = "text" size="20"><br><INPUT type="SUBMIT" value="Search" name="SUBMIT"></p></FORM>
</div>
<div class = "bodytext">
some stuff here
</div>
</div>
</div>
</div>
</body>
</HTML>
#nav, #nav2, #news a,div#nav a, div#nav2 a, {color: #ffffff;}
.alignleft, #buy, #container, #contact, #content, #contentdef, #docs, #faqs, #header, #home, #install1, #docsmanual, #news, #prod, #prods, #search, #support, #sysreq, #visit{text-align: left;}
#atdc, #buy, #cart, #contact, #dvc, #docs, #faqs, form.cart, #hds, #home, #install1, #docsmanual, #news, #prod, #prods, #repinfodiv, #search, #support, #sysreq, #viewcart, #visit{visibility: hidden;}
#atdc, #ballnav, #buy, #cart, #contact, #dvc, #docs, #faqs, #hds, #header, #home, #install1, #lback, #leftspace, #leftspace_baseball, #leftspace_basketball, #leftspace_fb, #leftspace_hockey, #leftspace_soccer, #leftspace_support, #leftspace_volleyball, #main, #docsmanual, #news, #prod, #prods, #repinfodiv, #search, #support, #sysreq, #techmsg, #viewcart, #visit{position: absolute;}
#atdc, body, #container, #content, #contentdef, #dvc, #hds, ol li, #repinfodiv, .whitebg{background: #ffffff;}
body, div, html, #lback{padding: 0px;}
body,div, html, p, {margin: 0px;}
body, html, #main{width: 100%;}
.bodytext, #footer{margin-left: 167px;}
div#nav a, div#nav2 a, #nav, #nav2{text-decoration: none;}
#leftspace{margin-top: 180px;}
#container{width: 760px;}
#container, html, #lback, #main{height: 100%;}
#content, #contentdef{z-index: 5;}
#content{padding: 80px 20px 0px 0px;}
#contentdef{padding: 50px 20px 0px 0px;}
div, p, span, table
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div, p, span, table{color: #000000;}
#header{background: transparent; z-index: 5;}
#lback
{
background: #000000 url(../images/blackback.gif) repeat scroll;
width: 50%;
margin-left: 0px;
margin-top: 0px;
}
#lback, #main
{
margin-right: -15px;
margin-bottom: -15px;
}
#leftspace{background: url(../images/img.gif) no-repeat; height: 432px;}
#main{z-index: 3;}
#nav{background: url(../images/img.jpg) no-repeat;}
#nav, #nav2
{
height: 29px;
padding: 5px 2px 0px 2px;
margin-bottom: 0px;
margin-top: 0px;
width: 500px;
margin-left: 50px;
z-index: 12;
}
#nav2{background: url(../images/img.gif) no-repeat;}
do you need all this definitions?
another thing
all those styles are well inserted in the page, i mean in a css file linked in the head of the document or inside a style tag in the head?
Try this and tell us if the situation gets better...
:)
Bye
I haven't tested your code, but it does look over-heavy - there may well be a better way of doing this.
The css declarations are all necessary, and don't all necessarily apply to the html you see there. I was just in a rush and didn't get to trim it all out.
Thanks for the suggestions. I'll give it a whirl and see how it goes.
