href not working in abs positioned box.

I am trying to use absolute positioning to put my header and search box at the bottom of my html code but I have a breadcrumb nav. bit that I want at the top. I have the layout looking ok and my breadcrumb anchor text is visible in the right place but it is not clickable when using firefox but it does work ok in IE. If I move the html code just down the page so its after the absolute position code then the links work fine in firefox. I have validated the html and css and the only error is in the css for my stylesheet include lines

which seem to work fine but the validator says:

File not foundimport file://localhost/131tabletpl.css:
File not foundimport file://localhost/content_styles.css:

which I assume is because this is on a non-internet accessible development server.

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

Here is the css for the abs. pos. elements.

#header{
position:absolute;
top:0px;
width:99.9%;
height:104px;
padding : 0px 1px 0px 1px;
border-right : 1px solid black;
}
#header2{
position:absolute;
top:104px;
width:100%;
height:80px;
overflow:hidden;
}

#header3{
position:absolute;
top:184px;
width:100%;
height:104px;
overflow:hidden;
background:#fff;
}
#subheader1{
background:#009999;
text-align:center;
height:104px;
}
#subheader1 img{
border:none;
}
#subheader2{
text-align:left;
height:70px;
}
#subheader3{
background:#FFFFFF;
text-align:center;
height:100px;
}

Here is the css for clearing the abs. pos boxes.

#cleartop {
width:100%;
height:288px;
overflow:hidden;
}

#cleartopabs {
position:absolute;
top: 0px;
width:99%;
height:288px;
overflow:hidden;
border-width : 1px;
border-style : solid;
border-color : black;

}

/* div for headers that are later in the html */

#absboxs {
position:absolute;
top:0px;
border-right : 1px solid black;
border-left : 1px solid black;
height:288px;
width:99%;
overflow:hidden;
}
Header 1 is a logo box, header2 is the breadcrumb and header3 is for a search box and a banner.

Here is the html code for the breadcrumb:

<div id='cleartop'>
<div id='cleartopabs'>
<div id="header2">
<div id="subheader2">
» <a href='/project/c6p9r317ji/quant/Historical-Introduction.html'>Historical Introduction</a> 

» <a href='/project/c6p9r317ji/quant/Historical-Introduction/Critical-Analysis-Factors.html'>Critical-Analysis-Factors</a> 
» <h1 style='display: inline;'>Data Processing</h1> 

</div>
</div>
</div></div>

href not working in abs positioned box.

hrefs that work in relative postions space don't work in abs. postioned.

charlier

Marshall

charlier

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week