1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

sprite won't work. please help.

         

boasco

7:26 pm on Feb 18, 2010 (gmt 0)

10+ Year Member



Hey,
I've just written my first sprite and it doesn't work. It's just one image used as a link button with a "hover" state that glows. It will link to the page it's supposed to, but doesn't show the hover image. The image is 160px x 68px ( the total jpg image is 160px x 138px... double the height to allow the shift to the "hover" image )
I need help. Below is the html code and the css style sheet.
Any suggestions would be appreciated.
Thanks,
B.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST SPLAT PAGE</title>
<link href="STYLES/splattest.css" rel="stylesheet" type="text/css" />
</head>



<body>
<!--start header-->

<div id="splat">
<ul>
<li class="logo"><a href="index.html"></a></li>

</ul>


</div>
</body>
</html>


@charset "UTF-8";

* {
margin:0; padding:0;}

#splat {
width:160px;
height:68px;
position:relative;
background: url(../images/splatforsprite.jpg);
margin:0;
padding:0;
}


#splat li {
float:left;
}

#splat li a {
position:absolute;
top:0;
margin:0;
padding:0;
display:block;
height:68px;
background:url(../images/splatforsprite.jpg) no-repeat;
text-indent:-9999px;
overflow:hidden;
font-size: 1px;


}

li.logo a {
left:0;
width:160px;
background-position:0 0;
}

li.logo a:hover {
background-position: 0 -68px;
}

bzgzd

1:31 pm on Feb 19, 2010 (gmt 0)

10+ Year Member



Main problem is that "#splat li a" is more then "li.logo a:hover" ... so use same way to specify that link hover
#splat li a:hover {
background-position: 0 -68px;
}


but also your css is too complicated with many not needed things...

* {
margin:0; padding:0;}

#splat {
width: 160px;
height: 68px;
position: relative;
}

#splat li {
float:left;
}

#splat li a {
display: block;
width: 160px;
height: 68px;
background: url(../images/splatforsprite.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

#splat li a:hover {
background-position: 0 -68px;
}

boasco

4:14 pm on Feb 19, 2010 (gmt 0)

10+ Year Member



bzgzd,
Wow, thank you so much. I've been on this problem for 3 days and you just fixed it with some tidy code. What do you mean, ""#splat li a" is more then "li.logo a:hover"? "More" how is it more?
Great job and thanks again, you've made my day.
B.

bzgzd

2:30 pm on Feb 20, 2010 (gmt 0)

10+ Year Member



More specific.

If you have two (or more) conflicting CSS rules that point to the same element, browser has to determine which one is most specific and therefore wins out. Later wins when they are equal specific.
div p { color: red; }
p { color: blue; }
color in <p> elements that are inside div will be red even later used rule says all <p> elements are blue but is less specific.

This is what I found somewhere:
Give every id selector ("#x") a value of 100, every class selector (".x") a value of 10 and every HTML selector ("x") a value of 1

So in your case:
#splat li a -> has value 102
li.logo a:hover -> has value 12

Because 102 is more then 12, even your :hover rule for background-position was specified later it was not applied.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026