Hello,

I have a very simple nav bar with a fixed height of 11px.

Somehow in IE6 (go figure), a padding of 2-3 extra pixels is added, thus revealing the background image's ON state for said button.

I've tried fiddling with the margin and the padding, but to no avail.

Code looks like this:

<ul id="topNav">
<li id="accueil"><a href="index.shtml?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Accueil">Accueil</a></li>
<li id="contact"><a href="contact.shtml?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Nous joindre">Nous joindre</a></li>
<li id="langue"><a href="en/index.shtml?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="English">English</a></li>
</ul>

CSS is defined as follows:

ul#topNav {
position: absolute;
top: 26px;
right: -2px;
width: 180px;
height: 11px;
}

ul#topNav li {
float: left;
display: inline;
list-style: none;
height: 11px;
}

ul#topNav li a {
display: block;
height: 11px;
margin: 0 10px 0 0;
text-indent: -9999px;
}

ul#topNav li#accueil a:link, ul#topNav li#accueil a:visited {width: 39px; height: 11px; background: url(../images/bt_accueil.gif) no-repeat 0 0;}
ul#topNav li#contact a:link, ul#topNav li#contact a:visited {width: 71px; height: 11px; background: url(../images/bt_contact.gif) no-repeat 0 0;}
ul#topNav li#langue a:link, ul#topNav li#langue a:visited {width: 40px; height: 11px; background: url(../images/bt_english.gif) no-repeat 0 0;}


/*roll*/
ul#topNav li#accueil a:hover, ul#nav li#accueil a:active,
ul#topNav li#contact a:hover, ul#topNav li#contact a:active,
ul#topNav li#langue a:hover, ul#topNav li#langue a:active {background-position: 0 -11px;}

If you'd like to see it in action, here it is : http://www.salon-perron-aitken.com/2009/test.html

Thanks for any help!

I had the same problem but it turned out a simple fix was to apply line-height to match the height of my navigation elements. So in your case you could use the following in an ie6 style sheet:

ul#topNav,
ul#topNav li,
ul#topNav li a {line-height: 11px;}