CSS list navigation

[.:Mammoth261:.]

Hey guys, basically been working on a webtemplate for my new clan site. I've used a list for my navigation. In internet explorer its over padded and im unsure how to remove it. Firefox is fine but Ie is a nono =[

Here is the HTML:

		<ul class="navmenu">
		<li ><a href="home.htm">Mammoth</a></li>
		<li class="row1"><a href="home.htm">RobZ</a></li>
		<li><a href="home.htm">Karamu</a></li>
		<li class="row1"><a href="home.htm">Puma</a></li>
		<li><a href="home.htm">Killing Joke</a></li>
		<li class="row1"><a href="home.htm">Magikarp</a></li>
		<li><a href="home.htm">Illusion</a></li>
		<li class="row1"><a href="home.htm">Maestro</a></li>
		</ul>

Here is the CSS:

.navmenu{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
	}

.navmenu li.row1{
	padding: 0;
	background-color: #f5f5f5;
	}
	
.navmenu li.row1 a{
	color: #000;
	padding: 3px;
	margin: 0;
	}
	
.navmenu li{
	margin:0; 
	padding: 0;
	vertical-align: center;
	}
		
.navmenu a{
	display: block;
	padding: 3px;
	margin: 0px;
	}
	
.navmenu a:hover{ background: #f8f8f8; }

Any ideas what wrong?

 

[DylanButler]

that sort of gave me a run for my money for a minute. too used to floating li's I suppose. the fix is pretty simple though, and there's a ton of different fixes. Assuming you don't want to apply a width or a height, heres the CSS:

<style>
.navmenu{
	list-style: none;
	margin: 0;
	padding: 0;
	}
.navmenu li{
	padding:0;
	margin:0;
	}
.navmenu li.row1{
	background-color: #f5f5f5;
	}
.navmenu li a { padding:3px; display:block; }
.navmenu li a:hover { background:#efefef; }
</style>
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->

More fixes here:
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

 

[.:Mammoth261:.]

Thanks Dylan! =] Appreciated mate. *Sends 30NP* *Adds to rep*