CSS/HTML help: Horizontal list menu problem?

Question

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;
}

• Home


• News and reviews


• blog site


• ebooks


• Forum


• About

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.)

Answer 1

I am not sure if this is what you want, but try the code below:

It will remove the spaces in between the list items.



li.TopMenu {

display:inline;

border-left:1px solid darkgrey;

padding:0px 10px 0px 10px;

margin:0px;

}

Answer 2

you could desire to outline a width someplace, curiously such as you're based particularly on padding to outline the width of your menu. try the two including margins and/or defining the width and top of #menu.

Answer 3

Change "padding:0px 10px 0px 10px;" to "padding:0px 0px 0px 0px;"



It's adding padding, thus spaces. hope it works