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. The text is still there (e.g "Advice", "Do It", "Home", Help") but the anchors (organized as list items) no longer appear in the navigation. I can't click on them anymore.
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;}
.....
Here's the header HTML:
<body>
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- logo -->
<h1 class="logo"><a href="home">Site Name</a></h1>
<!-- Feedback button -->
<div class="feed-w1">
<div class="feed-w2">
<div class="feed">
<span class="l"><a href="#">Feedback, please</a></span><span class="r"></span>
</div>
</div>
</div>
<!-- Small links -->
<div class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
<!-- Main Navigation -->
<div class="frame">
<div class="holder">
<ul id="nav">
<li><a href="#">Advice</a></li>
<li><a href="#">Do it</a></li>
<li><a href="#">Your Profile</a></li>
</ul>
<!-- Search box -->
<div class="search-form">
<form action="#">
<fieldset>
<legend class="hidden">Search Form</legend>
<input class="text" type="text" value="Search" title="Search" />
<input class="submit" type="submit" value="Search" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
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.