IE6 background-position(?) issue

Question

I apply to stackoverflow as my last resort. I got this ie6 bug while using the image at the background of the link. It seems that ie6 scrolls the background. How can I avoid it?

At some width it shows like this:
alt text http://img135.imageshack.us/img135/8849/badie1.png

And at some other it shows like that:
alt text http://img522.imageshack.us/img522/8180/badie2.png

IE7 & FF show this just like I expect:
alt text http://img142.imageshack.us/img142/2296/goodie.png
The links are placed inside the div which is floating to the right.

<a href="/tr" class="menuLink" style="background-image:url(/img/tr.png);">TR</a>
<a href="/eng" class="menuLink" style="background-image:url(/img/eng.png); margin-right:30px;">ENG</a>
<a href="/logout" class="menuLink" style="background-image:url(/img/logout.png);"><?=$ui["exit"];?></a>

   .menuLink {
     font-family:"Tahoma";
     font-size:11px;
     color:#003300;
     text-decoration:underline;
     font-weight: bold;
     background-position:0% 50%;
     background-repeat:no-repeat;
    }
     .menuLink:hover {
     font-size:11px;
     color:#047307;
     text-decoration:underline;
     font-weight: bold;
     }

Any hints how can I avoid this?

Answer 1

I just ran into this problem myself and I found that using overflow:hidden on the element with the background image solved a lot of my IE6 problems (though not all).

Answer 2

I would find a solution that works for IE6 and use Conditional Comments to filter out the other proper versions for IE7, FF, etc. I would also avoid using percents in the background-position for IE6 (reference).