Skip to main content
D
davecheet
Inspiring
December 28, 2011
Answered

CSS Rollover sprite not working

  • December 28, 2011
  • 1 reply
  • 1580 views

Hi Folks,

I've been trying to fix this for hours now and I've just run  out of ideas why it doesn't work.

It should be a simple image link - a 200 x 100 pixel image which contains two images - (200x50) stacked on top of each other.

The inital image works fine but doesn't change on hover.

The link works fine but the hover image doesn't appear. I've checked that the image works by swapping the background poitions and the image works fine so it can only be something I've done wrong in the CSS.

Here's the code I have on the page

------------------------------------

<div class="more">

<a href="page-detail.php?id=<?php echo $row_rs_deals['id']; ?>">More Details Here</a>

</div>

------------------------------------

And the CSS that goes with it

------------------------------------

.more a  {

          text-indent: -9000px;

          width:200px;

          height:50px;

          float:right;

          background: url(../images/detail-sprite.png) 0px 0px;

          margin-bottom:20px;

}

.more a: link {

          text-indent: -9000px;

          width:200px;

          height:50px;

          float:right;

          background: url(../images/detail-sprite.png) 0px 0px;

}

.more a: visited {

          text-indent: -9000px;

          width:200px;

          height:50px;

          float:right;

          background: url(../images/detail-sprite.png) 0px 0px;

}

.more a: hover{

          text-indent: -9000px;

          width:200px;

          height:50px;

          float:right;

          background: url(../images/detail-sprite.png) 0px 50px;

}

.more a: active{

          text-indent: -9000px;

          width:200px;

          height:50px;

          float:right;

          background: url(../images/detail-sprite.png) 0px 50px;

}

------------------------------------

Anyone got any idea why it doesn't work?

This topic has been closed for replies.
Correct answer Drymetal

I didn't look too closely at what you wrote earlier.  I had something on the stove.

I don't know the context this is in - so I'm pasting the CSS the way I would write it.  

a.more {
          text-align:center;
          font-weight: bold;
          color:#fff;
          width:200px;
          height:20px;
          float:right;
          background: url(../images/detail-sprite.png) 0px 0px;
          padding:15px;
}
a.more:hover {
          background-position: 0 -50px;
}

Now, I presume you want the text to appear on top of the graphic.  I'm not sure what color you want that text but here I have it set to white and bold.

Because there is nothing else going on, you don't really need all the other things like 'visited'.  I also got rid of the text-indent -9000px because that made absolutely no sense to me.

I changed the height to 20px and added padding of 15px.   (and deleted the margin)  This centered the text vertically.  You don't need to mess with the graphic,

What I have here will show your entire graphic.

The code on the page as I would write it is:

<div>
<a class="more" href="page-detail.php?id=<?php echo $row_rs_deals['id']; ?>">More Details Here</a>
</div>

I had accidently written .jpg instead of .png above which is why the graphic didn't work.  But, I would use the code on this post as it is more complete.

Let me know if this works. 

Message was edited by: Drymetal

1 reply

Drymetal
Drymetal
Inspiring
December 28, 2011

First off, you need to use a class.  So your code inside the div would look like this:

<div>
<a class="more" href="page-detail.php?id=<?php echo $row_rs_deals['id']; ?>">More Details Here</a>
</div>

I would change your CSS to the following.  I didn't fill it all in, but you'll see the difference:

a.more {
          width:200px;
          height:50px;
          float:right;
          background: url(../images/detail-sprite.jpg) 0px 0px;
}
a.more:hover {
          background-position: 0 -50px;

Instead of:
.more a  {
I have:
a.more {

Let me know if that works. 

D
davecheetAuthor
Inspiring
December 28, 2011

Done that. Now the text appears and the image doesn't appear at all?

Drymetal
DrymetalCorrect answer
Inspiring
December 28, 2011

I didn't look too closely at what you wrote earlier.  I had something on the stove.

I don't know the context this is in - so I'm pasting the CSS the way I would write it.  

a.more {
          text-align:center;
          font-weight: bold;
          color:#fff;
          width:200px;
          height:20px;
          float:right;
          background: url(../images/detail-sprite.png) 0px 0px;
          padding:15px;
}
a.more:hover {
          background-position: 0 -50px;
}

Now, I presume you want the text to appear on top of the graphic.  I'm not sure what color you want that text but here I have it set to white and bold.

Because there is nothing else going on, you don't really need all the other things like 'visited'.  I also got rid of the text-indent -9000px because that made absolutely no sense to me.

I changed the height to 20px and added padding of 15px.   (and deleted the margin)  This centered the text vertically.  You don't need to mess with the graphic,

What I have here will show your entire graphic.

The code on the page as I would write it is:

<div>
<a class="more" href="page-detail.php?id=<?php echo $row_rs_deals['id']; ?>">More Details Here</a>
</div>

I had accidently written .jpg instead of .png above which is why the graphic didn't work.  But, I would use the code on this post as it is more complete.

Let me know if this works. 

Message was edited by: Drymetal

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices