CODEWITHSUNDEEP
cssinternet-explorer-6background-imagebackground-position
turezky
turezky

Reputation: 856

IE6 background-position(?) issue

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?

Upvotes: 5

Views: 14000

Answers (6)

Steve
Steve

Reputation: 11

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.

Upvotes: 1

Scott
Scott

Reputation: 3485

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

Upvotes: 1

system PAUSE
system PAUSE

Reputation: 38500

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

Upvotes: 1

VirtuosiMedia
VirtuosiMedia

Reputation: 53356

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

Upvotes: 3

Shaun Humphries
Shaun Humphries

Reputation: 1035

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.

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190905

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

Upvotes: 1

Related Questions