CSS/HTML help: Horizontal list menu problem?

S

Space Invader101

New member
Why does my menu items have gaps between each item/border? I’ve set the outline and margin to 0px, but still the gaps appear:

/*Top Navigation menu*/
ul.TopMenu
{display:inline;
position:absolute;
Right:0px; Top:20px;
border:1px solid black;
margin:0px;
padding:0px;
}
li.TopMenu
{
display:inline;
border-left:1px solid darkgrey;
border-right:1px solid darkgrey;
padding:0px 10px 0px 10px;
margin:0px;
outline:0px;
}

<ul class="TopMenu">
<li class="TopMenu"><a>Home</a></li>
<li class="TopMenu">News and reviews</li>
<li class="TopMenu">blog site</li>
<li class="TopMenu">ebooks</li>
<li class="TopMenu">Forum</li>
<li class="TopMenu">About</li>
</ul>


I’ve been able to get rid of the gaps between items with a floating menu, but not absolute. (I don’t want the list items to move around when resizing the browser.)
Padding's not the issue. I want that. I don't think you understand.

There's gaps between the right and left borders outside the list boxes even though margin and outline have been set to 0px.
 
Back
Top