Using HTML5 and hover not working right using Firefox and Opera

[sabillondesigns]

Hover works when using text-decoration, but when using image sprites with hover it works fine with IE and Chrome but nothing happens on FF and Opera.

Anybody else having this problem?

Any advise?

thanks

[jamygolden]

Try validating your html and css.

[sabillondesigns]

OK here is the code for one of the images in the list:

div#social ul {
padding: 0;
height: 56px;
width: 200px;
margin: 0 auto 35px;
list-style-type: none;
}

div#social li {
float:left;
margin: 0 5px;
text-indent: -9999px;
background-image: url(‘../images/socialicons.png’)
}

div#social li a {
display:block;
width: 56px;
height: 56px;
}

div#social li#twitter {
background-position: -56px 0px;
}

div#social li#twitter:hover {
background-position-y: 56px;
}

works fine on Chrome and IE not but FF… :(

[sabillondesigns]

ok i fixed it.

For some reason FF and Opera do not understand the background-position-y?

Now im using

#twitter a:hover {

background: url('../images/socialicons.png') -56px 56px;

}

and it seems to work.

[Author]

Posts