Menu white space?

HTML & CSS
1

Hi guys

I have a menu,
http://thefml [dot] org [dot] uk/secret/main/home_page/

and it has white spaces or white gaps in it.
How to remove it?

This is the css,


div.menu {
	width: 968px;
	height: 40px;
	padding: 0px;
	border: 0px solid gray;
	margin-left: 15px;
	margin-top: 15px;
	position: absolute;			
}

#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

#navcontainer ul li {
	display: inline;
}

#navcontainer ul li a
{
	font-size: 90%;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: blue;
}

#navcontainer ul li a:hover
{
	font-size: 90%;
	color: #fff;
	background-color: #369;
}

#navcontainer2 ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

#navcontainer2 ul li {
	display: inline;
}

#navcontainer2 ul li a
{
	font-size: 90%;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: red;
}

#navcontainer2 ul li a:hover
{
	font-size: 90%;
	color: black;
	background-color: red;
}

Thanks in advanced.

2

To get rid of the gap, delete all the white space between your <li> elements in the menu’s HTML.

The short explanation for what’s happening is that, in your CSS, you set the <li> elements to display: inline, which means that they get treated like words, which means all that white space between them (new lines, tabs, etc) gets collapsed to a single space. It’s the same reason that the following HTML…


<p>hello,


        world</p>

…shows up like this in the browser:


hello, world

Here’s a silly article explaining 6 different ways to fix it. And because I’m so awesome, here’s a 7th way: just put all the HTML for the list items on the same line! Screw readability!

(Sorry if the explanation didn’t make much sense, I’m tired and I couldn’t find a good blog post about it :P)