HTML and CSS Issues with IE7 Navigation

Im have made a navigation bar for the top of site, the final look i wanted in the end was, simple text menu but then when you hover items the background changes using a background image. I have managed to do this and in all browsers when you hover over the background changes and it is fine, but in internet explorer 7 it looks like this...

I have tried changing the heights and widths, but still cannot get IE7 to go the same as the others?

The HTML code for the navigation is

     <ul class="buttonleft"> 
    <li><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="GB" /></a></li> 
    </ul>      

the CSS is

.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px}
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px}
.buttonleft li a:hover{background:url(../images/topbgover.png)}
img{border:0}
#topflag{margin-right:3px;开发者_如何学编程margin-left:3px}

Any help would be great :D

---

I came up with a variation of your navigation and posted the demo at:

http://jsfiddle.net/audetwebdesign/HB6Zm/

I did not test it in IE7 but the two critical things to set are: use display: block for the a tag as suggested by GodFather earlier (that way the padding works on all sides) and use a strict doctype, otherwise you may see variations in quirks mode.

Since your are floating the li elements, they become blocks, so there is no need to change the display property.

Finally, it was not clear to me why you need a negative margin on top, but without see the final layout, it is hard to say.

I added some extra paddings and background colors to highlight the block elements and illustrate which styles control aspects of the layout.

---

Change the ".buttonleft li" to display: block, and the same rule you need to set on "a" tag. Maybe you'll need to set some padding on "a" tag.