Css Sprites and IE8 problem

views:

362

answers:

+1 Q:

Css Sprites and IE8 problem

Hello!

I’m working on a site which has almost 30 background images, so I decided to make a "sprite image", and use the background-position attrib in CSS.

In FF, and Opera the whole design shows correctly, but under IE8, I get a problem. It seems IE8 doesn’t position the image correctly. I see a thin line in a few places between the images. Sometimes when I zoom in with mouse scroll the line disappears, then shows again...

For example, I use sprites something like this:

#index {
        margin-left:0px;
        margin-top:0px;
        width:327px;
        height:57px;
        margin-bottom:0px;
        float:left;
        display:inline;
        background-image:url(images/sprites/sprites_left.jpg);
        background-position:0px -340px;
        overflow:hidden;

    }

Is this an IE8 bug? What should I do? Leave the design split into 30 background images?

Thank you.

+1 A:

Generally speaking I would leave a gap of a few pixels (or more) between each tile in your sprite image.

scunliffe 2010-02-02 14:15:02

and you think this is the problem? i try i, make a new sprite image with "gaps"

Holian 2010-02-02 14:20:03

“Sometimes when I zoom in with mouse scroll, then the line disappears” — I think I’ve seen something like that in Chrome when zooming.

Paul D. Waite 2010-02-02 14:26:34

Scunliffe: It seems you have right. When i recreated the "spirte img" with 2px space the problem gone..thank for the tipp.

Holian 2010-02-02 19:20:12

no problem... any time. I tried to find a blog post that discusses the issues (across browsers) with large widths/heights and small gaps but I haven't found it yet. I'll follow up with it later when I find it. ;-)

scunliffe 2010-02-02 20:58:34

ansaurus

tags:

views:

answers:

Css Sprites and IE8 problem

related questions