CSS Problem between FireFox and Chrome

Okay this is a continuation of my previous question found here.

I have an asp.net menu control styled as an unordered list that is rendering slightly differently in chrome and firefo开发者_JAVA技巧x. I am convinced this is due to an error in my css as opposed to a quirk between the two browsers.

I have recreated the menu here.

Here is a screen shot depicting the problem(Chrome on top, FireFox on the bottom):

Any Ideas??

Because your provided demo seemed rather hopeless in IE, I made new CSS to go with your HTML, trying to keep the behaviour of your old CSS:

(tested in IE7/8, Firefox, Chrome)

Live Demo

Your HTML (slightly changed: href="#"/class="selected"):

<div class="header">
    <div class="headerInner">

        <div class="hideSkipLink">
         <div class="menu">   
          <ul>
              <li><a href="#">Test 1</a></li>
              <li><a href="#" class="selected">Test 2</a></li>
              <li><a href="#">Test 3</a></li>
            </ul>
         </div>
        </div>

    </div>
</div>

New CSS:

.header {
    font: 12px/18px Tahoma,arial,sans-serif;
    height: 33px;
    background: #666;
    border-bottom: 2px solid #a10000;
}
.header ul {
    margin: 0;
    padding: 8px 0 0 0;
    list-style: none;
    height: 33px
}
.header li {
    display: inline
}
.header li a {
    float: left;
    display: block;
    margin: 0 0 0 4px;
    padding: 3px 20px 0 20px;
    height: 22px;
    text-align: center;
    color: #fff;
    text-decoration: none
}
.header li a:hover {
    border: 1px solid #fff;
    border-bottom: none;
    padding: 2px 19px 0 19px;
}
.header li .selected, .header li a:active {
    font-weight: bold;
    color: #000;
    background: #fff;
    border: 2px solid #a10000 !important;
    border-bottom: none !important;
    padding: 3px 20px 0 20px !important;
}

Check the padding on the element. They all seem shifted over a few pixels. Also, could you give us the CSS please?