CSS Sprites images rendered with bad quality in IE

Question

I have a CSS image sprite and this renderes perfect in FF, also IE. The problem is the rendered image looks to have poor quality in IE.

Has anyone encountered this before? How did you fix it? I need CSS sprites to save bandwidth and requests.

alt text http://cupacupelor.ro/img/problem.png

.blackmncenter2
{
    float:left;
    height:32px;
    line-height:32px;
    background-image:url(../img/top-menu-center.png);   
    background-repeat:repeat-x;
    background-position:left -64px;
    color:White;
    cursor:pointer;
    display:block;
}

Image:

http://cupacupelor.ro/img/problem.png

Demo:

http://cupacupelor.ro/

The black top menu, available max 7 days from posting. Try it with FF, then with IE.

Answer 1

Do you need to have the graphic in PNG format? Traditionally, Internet Explorer 6.0 and earlier had some issues relating to the PNG format, most notably the lack of support for the alpha channel.

Without this alpha channel, IE can't render the transparency represented in PNG images correctly. This might distort the image a bit, or give you something other than what you were expecting to see.

Without more details it's hard to discern what's causing the problem (or what the problem is in the first place).

Answer 2

Please define "poor quality". Maybe it's because your CSS sprite didn't preserve the original image's transparency?

Answer 3

Strange behavior, not expected.

Even if I have IE 7 and PNG with no transparency, backgrounds rendered with background-position style work weird in IE.

Saving the image as JPG and modify the CSS solved the problem.

Than you guys, I voted the answers.