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