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?

Shainashaine

Similar question: #595370 – Sanjay

Try adding "zoom: 1" to the style of the elements - hasLayout in IE can cause some strange bugs satzansatz.de/cssd/onhavinglayout.html. I haven't tried it, but this is one of the first things I try when debugging this kind of stuff as it often changes the way the background's rendered – Ajar

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).

Whisk

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).

Derosier

I tried to use <code>background-position:center left;</code> instead. It shows the same. So what exatly should I comment conditionally... – Shainashaine

Try using a pixel value since everything you are dealing with are pixels. – Derosier

I would keep hacking away. Once you get the right combination of styles package them up and use the conditional comments to override anything. – Derosier

Answer 3

As advised in this answer to a somewhat related question, I'd recommend using background-position-x and background-position-y instead of background-position for IE (pre-IE8).

Sanjay

Answer 4

You can't use background-position with any* ie6 .png fixes the solution is to make the image a gif or a 8-bit png.

*None that I use/tried

Gittens

dillerdesign.com/experiment/DD_belatedPNG - Keeps background positions. It's the best PNG Fix IMO. But I would hazard a guess the PNG Fix is killing the background position also. – Walworth

@MiG I had used the htc file fix link which didn't keep background positions. The DD_belatedPNG keeps. – Galley

I was able to get my 32-bit PNG to line up perfectly using overflow:hidden as recommended above. – Pharos

Answer 5

If you have padding-top or padding-bottom in your element with background images and background-positioning -- in IE6 you can change your padding-top: 16px; to margin-top: 16px; and it fixes the problem.

It doesn't push other elements away and doubles the padding anymore.
Otherwise, in IE7 and IE8 the padding attribute works.

Baccalaureate

Answer 6

Change

background-position:0% 50%;

to

background-position:50% 50%;

and add

background-repeat: no-repeat;

This will center the image horizontially as well as vertically and stop the image from tiling.

Bramblett

If I do this, my image goes behind text :( And centers there, I need the images before the text... – Shainashaine