Image Rollovers

This is a continuation of my JavaScript Rollover section. People suggested to use CSS Rollovers, and so I am trying. Having some troubles. My links are as shown in my main HTML documents:

Code: Select all

<div id="home"><a href="index.html">&nbsp;</a></div>

My CSS Document is laid out like this for each link. As of right now I do not have a single image background:

Code: Select all

#home a
    {
    display:block;
    width: 99px;
    height: 30px;
    background: url(images/linkies/home.gif) 0 0 no-repeat;
    }
#home a:hover {background-position: -31 0;}

I have gotten it to show the image, but it does not want to move the image down when you rollover it.

Try adding px to -31px

Otherwise ... do you have this online?

Ok Ill try that, and yes I can have it online in a matter of seconds, I currently have the old working version on the webpage online right now. The website is www.ruthless-wow.com. Thanks.

Let me clean up my code and then ill upload the new page. I'm getting a rollover but it seems off a bit.

An online version of that problem you are facing now would be best so I can try a few things on my side with Firebug.

Ok it is up, it is still doing the weird thing though, I'm going to play with the other attribute for the left side.

Ah Ha! I had the two dimensions mixed. Going to fix them now.

What weird thing?

It is all fixed. Hey thanks. That was what I was missing, dumb px =D. Well Thanks again.

Ah well ... there you go!

I had the Dimensions on the rollover backwards, It was rolling left/right, instead up/down.

been there ... done that

Helps to talk it out...Problem solved! closing thread