empty link in Firefox, not in IE

hi, i m trying to create a menu
In IE 6 all label links are created normally. However, when i m trying with FF , then, an empty space is created on left from the first link, as if i had some padding.

Any help??

My CSS code is:

#menu
{
	width: 820px;
	height: 30px;
	margin: 0 auto;
	background-color: #EFF3F9;
}

#menuleft 
{
	
	float: left;
	
}

#menuleft ul {
	margin: 0;
	list-style: none;
	line-height: normal;
}

#menuleft li {
	display: inline;
}

#menuleft a {
	display: block;
	float: left;
	height: 16px;
	padding: 8px 18px 0 20px;
	background: url(images/vertical_line.gif) no-repeat;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}

#menuleft a:hover {
	text-decoration: underline;
}

#menuleft .first a {
	padding-left: 10px;
	background: none;
} 

Code (markup):

My html code is

<div id="menu">
       <div id="menuleft">
              <ul>
                <li class="first"><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Support</a></li>
              </ul>
       </div>        
    </div>

HTML:

 

Put this in your CSS: *{padding:0;margin:0}

This will set the padding & margin of all elements to 0. This will give you some consistency across various browsers, but you will have to set padding/margin explicitly for elements like P, H1 etc.

 

Thank you, it worked!
Btw, where can i find free consistent css templates working in various browsers? i googled it but i think i found templates not consistent with FF or Opera

 

They are often called "reset.css", the YUI toolkit has a nice one:
http://developer.yahoo.com/yui/reset/

 

That's what I was gonna suggest! It's always best to make your css consistent before doing anything with your page design.