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?

Similar question: http://stackoverflow.com/questions/594870/fix-for-background-position-in-ie — system PAUSE, May 14 '09 at 17:43
Try adding "`zoom: 1`" to the style of the elements - hasLayout in IE can cause some strange bugs http://www.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 — cryo, Apr 14 '10 at 11:38

score 3 · Answer 1 · answered May 04 '09 at 07:51

3

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

answered May 04 '09 at 07:51

VirtuosiMedia

52,016
21
93
140

score 1 · Answer 2 · answered Apr 14 '10 at 11:20

1

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

answered Apr 14 '10 at 11:20

Scott

3,290
4
29
48

1

http://www.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. – Hux Oct 17 '10 at 11:56
@MiG I had used the htc file fix [link](http://www.twinhelix.com/css/iepngfix/) which didn't keep background positions. The DD_belatedPNG keeps. – Harish Jul 28 '11 at 07:17
I was able to get my 32-bit PNG to line up perfectly using overflow:hidden as recommended above. – strongriley May 16 '12 at 14:52

score 1 · Answer 3 · edited Dec 09 '12 at 17:03

1

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.

edited Dec 09 '12 at 17:03

jenzz

7,239
6
49
69

answered Oct 17 '10 at 11:51

Steve

11
1

Daniel A. White · Answer 4 · 2009-04-18T16:40:35.353

1

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

edited Apr 18 '09 at 16:40

answered Apr 18 '09 at 16:35

Daniel A. White

187,200
47
362
445

I tried to use background-position:center left; instead. It shows the same. So what exatly should I comment conditionally... – turezky Apr 18 '09 at 16:53
Try using a pixel value since everything you are dealing with are pixels. – Daniel A. White Apr 18 '09 at 17:06
I would keep hacking away. Once you get the right combination of styles package them up and use the conditional comments to override anything. – Daniel A. White Apr 18 '09 at 21:36

score 1 · Answer 5 · edited May 23 '17 at 11:53

1

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

edited May 23 '17 at 11:53

Community

1
1

answered May 14 '09 at 17:47

system PAUSE

37,082
20
62
59

score 0 · Answer 6 · answered Apr 21 '09 at 12:38

0

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.

answered Apr 21 '09 at 12:38

Shaun Humphries

1,070
9
15

If I do this, my image goes behind text :( And centers there, I need the images before the text... – turezky Apr 23 '09 at 20:31

IE6 background-position(?) issue

6 Answers6