Why did this CSS Sprite stop displaying in Firefox?

[lip420]

Hi~
I am not an expert here. I had created a CSS sprite a week ago or so and it was displaying properly in FF, but now it’s suddenly not displaying at all.

I checked safari and google and it displays fine on those browsers. This is the uncompressed code for the sprite that I put into my index.css file:

.sprites {
background-image : url(/my/sprite/image.png);
background-color : transparent;
background-repeat : no-repeat;
}

#hover_jpg {
height : 35px;
width : 14px;
background-position : -0px -0px;
}

#left-bg_jpg {
height : 1px;
width : 232px;
background-position : -14px -0px;
}

#left-bot_jpg {
height : 37px;
width : 232px;
background-position : -246px -0px;
}

#left-bottom_jpg {
height : 13px;
width : 232px;
background-position : -478px -0px;
}

#left-top_jpg {
height : 32px;
width : 232px;
background-position : -710px -0px;
}

#log-in-arrow_jpg {
height : 7px;
width : 8px;
background-position : -942px -0px;
}

#nav-bg_jpg {
height : 35px;
width : 1px;
background-position : -950px -0px;
}

#nav-left_jpg {
height : 35px;
width : 11px;
background-position : -951px -0px;
}

#nav-right_jpg {
height : 35px;
width : 11px;
background-position : -962px -0px;
}

#nav-sep_jpg {
height : 35px;
width : 3px;
background-position : -973px -0px;
}

#right-bg_jpg {
height : 1px;
width : 232px;
background-position : -976px -0px;
}

#right-bottom_jpg {
height : 18px;
width : 232px;
background-position : -1208px -0px;
}

#right-sep_jpg {
height : 2px;
width : 176px;
background-position : -1440px -0px;
}

#right-top_jpg {
height : 18px;
width : 232px;
background-position : -1616px -0px;
}

#spacer_gif {
height : 1px;
width : 1px;
background-position : -1848px -0px;
}

#submit-but_jpg {
height : 22px;
width : 74px;
background-position : -1849px -0px;
}

And here’s an example how I replaced the original image with a sprite image:

.login a{display:block; background-image: (#log-in-arrow_jpg); background-repeat: no-repeat; background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

Could this be a problem just with FF? I had other problems with it recently.

Thanks~

[Paulie_D]

A link would be good.

Oh…and please use the code wrapping feature (it’s the one next to the “I”.

And another ‘Oh’…those are some large numbers for a sprite..how exactly are you using it?

[lip420]

Thanks for your reply.
It’s for background images. I created the sprite with a generator. I inserted the above code into my index.css and then changed the references? to the image:

.login a{display:block; background-image: (#log-in-arrow_jpg); background-repeat: no-repeat; background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

Before I had the sprite the code was like this:

.login a{display:block;	background-image: url(../images/log-in-arrow.jpg);	background-repeat: no-repeat;	background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

So after I made the sprite I just changed url(../images/log-in-arrow.jpg) to (#log-in-arrow_jpg).

I don’t want my site to show up in search, so it’s esl inside r (dot) com

It was weird because it was working for about a week and now not.

[lip420]

I did some testing and it turns out it’s not the sprite. I replaced the new css with the old and the problem still remains.

[Author]

Posts