homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
href not working in abs positioned box.
hrefs that work in relative postions space don't work in abs. postioned.
charlier




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

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




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

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




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved