Changing CSS height property removes anchors?
- by JMan
I am working on a standard header/navigation for my website.
I started with having a CSS "height" value of 100% for the html, body elements but this resulted in the wrong layout.
However, when I change the CSS height property from "100%" to "auto", the layout is correct, but I lose the anchors in the navigation.
Why is this?
Here's my CSS:
html,body {
height: auto; /* This is the only property that I'm toggling */
margin: 0;
}
body {
margin: 0;
min-width: 978px;
font: 12px/16px Arial, Helvetica, sans-serif;
color: #000;
background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;
}
#nav {
position: relative;
float: left;
margin: 0;
padding: 0 2px 0 271px;
list-style: none;
background: url('../images/sep-nav.gif') no-repeat 100% 0;
}
#nav li {
float: left;
padding: 11px 0 0 2px;
height: 35px;
width: 128px;
line-height: 22px;
font-size: 18px;
text-align: center;
background: url('../images/sep-nav.gif') no-repeat 0 -1px;
display: inline;
}
#nav li a {color: #FFFEFE;}
.....
I compared the computed CSS in Firebug when the html, body height property was set to "auto" vs. "100%" and they were the same.
Can somebody please shed some light on how retain the anchors in the navigation while setting height to "auto"?
Thanks for your help.
