CODEWITHSUNDEEP
csscss-sprites
oipsl
oipsl

Reputation: 337

CSS Sprite Compatibility in Firefox

I have a div element that uses the css classes below. Basically, I'm creating a sprite image link that changes on hover.

.home {
    background: url('images/home.png') 0 0;
    width: 150px;
    height: 188px;
    border: none;   
}

.home:hover {
    background-position: -150px 0;  
}

When I tested it with different browsers, it seemed to work well with most browsers except for some versions of Firefox. On hover, it doesn't switch the img position. As I read from w3c for this to work in Firefox, the "background-attachment" property to "fixed". I did this and added the property to both classes and still didn't work. When I added the property, the image was centered, and whatever was not within the specified width and height were cut off.

Upvotes: 3

Views: 4258

Answers (4)

user3453496
user3453496

Reputation: 1

 background-position: 0px 0px;
 background-position: -150px 0px;

Upvotes: 0

oipsl
oipsl

Reputation: 337

Oops, it looks like I forgot to add the DOCTYPE tag at the beginning at the file, which contributed to the thing not working in FF.

Added

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it worked!

Upvotes: 1

lnguyen55
lnguyen55

Reputation: 737

You have to have no-repeat for background image. Firefox works fine with background-position but background-position-x and background-position-y wont work. I don't know what you are willing to do for which element, but it should work on block elements only. If it's not a block element, display: block is required

.home {
    background: url('images/home.png') no-repeat 0 0;
    width: 150px;
    height: 188px;
    border: none;   
    display: block;
}

Upvotes: 2

kevinjharley
kevinjharley

Reputation: 43

This is a guess without seeing the problem, but sometimes using the background shorthand can be buggy in FF:

try :

.home {
  backround-image: url('images/home.png');
  background-position: 0 0;
  height: 188px;
  border: none;
}

.home:hover {
  background-position: -150px 0;
}

Upvotes: 2

Related Questions