Welcome to WebmasterWorld Guest from 23.22.250.113

Forum Moderators: not2easy

Message Too Old, No Replies

href not working in abs positioned box.

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

     

charlier

1:43 pm on Sep 29, 2007 (gmt 0)

10+ Year Member



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

<style type="text/css" media="screen">
@import url("/131tabletpl.css");
@import url("/content_styles.css");
</style>

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">
&raquo;&nbsp;<a href='/project/c6p9r317ji/quant/Historical-Introduction.html'>Historical Introduction</a>&nbsp;

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

</div>
</div>
</div></div><!-- End clears -->

Marshall

3:38 pm on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your one div may be overlapping the other. When you place absolutely, you have to take into account not only the height of the <div> but also the margin, padding and border. There may also be a problem with the margins and padding of any text in the <div> above the one that you cannot click on.

The easiest way to see this is put a visible border around all the <div>'s and see what overlaps.

Marshall

charlier

11:57 am on Sep 30, 2007 (gmt 0)

10+ Year Member



Thanks, that was the problem, in fact I had really screwed it up as I had one abs. postioned div overlayed on another; I didn't know that was a no no, it looked ok visually but broke the links. Funny though it works in IE!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month