Question

For some reason, my topnav is not the full width of my browser window (it goes almost the full length of the window, but not entirely, on both ends) and also there is a bit of space between it and the top of the browser window.

How do I make it so this is not the case? Here’s my code:

#topnav
{
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
}

#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}

Here’s the HTML:

<div id="topnav">
<ul>
<li><a href="index.psp" id="index">Index</a></li>
<li<a href="inventory.psp">Inventory</a></li>
<li><a href="/checkup/checkup.psp">Check-Up</a></li>
</ul>
</div>

EDIT: Now the bar extends all across the browser, however there is still a gap up at the top.

Also, the gap is only present in Firefox – it does not show up in Chrome. My whole thing is messed up in IE.

Answer 1

to the top problem try this:

#topnav {
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;

position:absolute;
top:0;
}