List background image problem

Hi Folks,

I’m trying to get a UL to stretch the width of the page, 40 pixels high, with a transparent background. It works fine in IE7, but FF has a mind of its own.

Can anyone please help?

Ive attached the view in each browser.

Code is below, any help much appreciated.


#navigation {
	width:720px;
	background-color:transparent;
	height:38px;
	display:block;
}
#navigation li {
	list-style: none;
	background-color:transparent;
	float: left;
}
#navigation a {
	text-decoration: none;
	background-color:transparent;
	color: #FFFFFF;
	float: left;
	background-image: url(images/tabs-right.jpg);
	background-position: right top;
	font-size: 100%;
	font-weight: bold;
	text-transform: uppercase;
}
#navigation a span {
	background-position: left top;
	background-image: url(images/tabs-left.jpg);
	background-repeat: no-repeat;
	float: left;
	cursor: pointer;
	padding-top: 12px;
	padding-right: 15px;
	padding-bottom: 8px;
	padding-left: 15px;
	background-color:transparent;
}
#navigation a:hover, #navigation .current a {
	background-position: right -50px;
	color: #000000;
}
#navigation a:hover span, #navigation .current a span {
	background-position: left -50px;
	border-bottom: 0;
}
<div id="header">
  <h1><span>Monster Metals</span></h1>

  <ul id="navigation">
  <li> <a href="index.php"
	
	    
	  > <span>Home</span> </a> </li>
  <li
	  > <a href="faq.php"     > <span>FAQ</span></a> </li>

  <li      > <a href="products.php"  > <span> Products</span> </a> </li>
 

  <li  > <a href="contact.php" class='current'>  <span>Contact</span> </a> </li>
</ul>
  <br style="clear:both;" />

</div>




Hi,

Do you have a link as it’s hard to debug without images etc?

It doesn’t look like you have reset the default left margin/padding on the ul to zero.

ul{margin:0;padding:0;list-style:none}