CODEWITHSUNDEEP
csscss-sprites
Sorin
Sorin

Reputation: 2288

CSS Sprites images rendered with bad quality in IE

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.

Upvotes: 0

Views: 2859

Answers (3)

Sorin
Sorin

Reputation: 2288

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.

Upvotes: 0

Jacob Honeyhume
Jacob Honeyhume

Reputation: 1965

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

Upvotes: 3

Wim Leers
Wim Leers

Reputation: 1631

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

Upvotes: 1

Related Questions