CSS Button problem (chrome problem. IE and FF is ok)

HTML & CSS
1

The chrome button display problem

The CSS code for the button.

/* menu */
.menu_nav { padding:0; float:left; width:auto; height:50px;}
.menu_nav ul { list-style:none; padding-top:14px;}
.menu_nav ul li { margin:0 0 0 4px; float:left; background:url(images/menu_bg.gif) no-repeat right center;}
.menu_nav ul li a { display:block; margin:0; padding:2px 0 8px 19px; color:#8e8e8e; text-decoration:none; font-size:14px; font-weight:normal;}
.menu_nav ul li a span { padding:5px 19px 12px 0;}
.menu_nav ul li a span span { padding:5px 0 12px;}
.menu_nav ul li.active a , .menu_nav ul li a:hover {  background:url(images/menu_al.gif) no-repeat left top;}
.menu_nav ul li.active a span, .menu_nav ul li a:hover span { color:#fff; background:url(images/menu_ar.gif) no-repeat right top;}
.menu_nav ul li.active a span span, .menu_nav ul li a:hover span span { background:url(images/menu_a.gif) repeat-x top;}

This is the code on my website.



  <div class="menu_nav">
        <ul>
          <li><a href="index.html"><span><span>Home</span></span></a></li>
          <li><a href="products.html"><span><span>Products</span></span></a></li>
          <li class="active"><a href="contact.html"><span><span>Contact Us</span></span></a></li>
                </ul>
      </div>
	  <div class="clr"></div>

The button displays perfectly fine in IE and FF.
it only has a display problem in chrome.
I suspect the problem is around

background:url(images/menu_al.gif) no-repeat left top;}
.menu_nav ul li.active a span, .menu_nav ul li a:hover span { color:#fff; background:url(images/menu_ar.gif) no-repeat right top;}
.menu_nav ul li.active a span span, .menu_nav ul li a:hover span span { background:url(images/menu_a.gif) repeat-x top;}

but i am not sure how to fix it.
Appreciate any help given

Thanks a million

2

Try setting the vertical alignment of everything to bottom.

Get a test site up where this is happening and I can give you the fix more easily (if vertical align isn’t the answer)

3

Hi, thanks for the reply. but i tried adding padding:0 … and doesn’t work.

…

for those who are wondering what the files name are…

Uploaded with ImageShack.us

4

did you already tried to add padding:0 to these two lines?