Forum Moderators: not2easy
#tabs {
height:auto;
font-size:100%;
color:#000000;
width:800px;
margin:0;
padding:0 80px 0 80px;
border-bottom:2px solid #CCCCCC;
}
<div id="tabs">
<ul>
<li class="menupadding"><a href="#"><span>Bio</span></a></li>
<li class="menupadding"><a href="#"><span>Resume</span></a></li>
<li class="menupadding"><a href="#"><span>Portfolio</span></a></li>
<li class="menupadding"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
#tabs {
position:relative;
top:0px;
font-size:100%;
color:#000000;
width:800px;
padding:0 80px 0 80px;
border-bottom:2px solid #999999;
}
but it appears accross the middle in firefox.
Methinks there's more to this story. :-)
I was able to duplicate this like so:
.menupadding { display:inline; float: left; }
I'm prompted to think so by the name "tabs." If that is the case, remove the float. Noted mods:
- You can un-clutter the html by removing the classes, note the #tab ul li selector.
- Don't span inside an anchor, style the anchor instead.
- (Generally) the only reason to specify position:relative is to override a previous absolute, position is relative by default.
- divs have no margin by default, no reason to specify margin-top.
- I also question the padding, if your intent is to center, you can just use margin:auto.
- you may also want to add some margin/padding alts to #tab ul if you want to play with the spacing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
body,html { margin: 0; }
#tabs {
margin:auto;
font-size:100%;
color:#000000;
width:800px;
padding:0 80px 0 80px;
border-bottom:2px solid #999999;
}
#tabs ul { text-align: center; }
#tabs ul li { display:inline; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">Bio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
position is relative by default
position:relative allows the use of top/bottom/right/left to nudge the element away from it's in flow position without altering the space reserved for it in the flow.
position:relative also has a side effect in giving the element "position" as is referenced from children of the element that might have position absolute: the positioning is then done relative to the nearest parent that has position instead of to the viewport.
More info: [w3.org...]
Interested to know if this solved the problem though . . . .
Nb. The tableftF.gif is just the left edge of the tab, while the tabrightF.gif is the rest of it.
I might use the menupadding class down the road or will remove them if I don't. As for the position, I put that to try fix the problem and hadn't removed it when it didn't work. The Html validates.
