Why won't CSS rollovers work for me?

September 25, 2008 3:16 PM

I'm trying to put CSS rollover buttons onto my website. They show up just fine in Dreamweaver, but not on any browser. This makes no sense, about to go insane, more inside, etc.

Alright, I hope someone here can help me.

I'm trying to put some CSS rollover buttons on a page, as so . . .


[MeFi is stripping out my HTML code, but it's basically a link--a href--with a class tag (="artisticroll") and some style for positioning.]
Note: I'm positive that there's not an error in this code.


. . . and this links back to my .css file, part of which is thus . . .


a.artisticroll
{
display: block;
width: 200px;
height: 23px;
background-image: url('artisticROLL.jpg');
}
a.artisticroll:hover
{
background-position: 0 23px;
}


. . . but it only shows up in Dreamweaver--not in any browsers. I've tried doing a local preview as well as actually uploading all the files onto my host and viewing it online. Nothing works.

This isn't the weird part. What's stranger is that I have other CSS rollover buttons on the same page that work just fine.

Code / .css except for working buttons:


[Same issue/code as above, except the class is "contactroll".]


a.contactroll
{
display: block;
width: 130px;
height: 60px;
background-image: url('contactROLL.jpg');
}
a.contactroll:hover
{
background-position: 0 60px;
}


As far as I can tell, there is absolutely no reason for some buttons to work and some not. What am I doing wrong?

Thanks for any/all help; I can provide more details if needed.

posted by reductiondesign to Computers & Internet (18 answers total)

Can you be more specific? When you preview using the browser, can you see the buttons at all? If you could MeFiMail me a link to the page in question, I could take a look. Have you checked if the images load correctly from the browser, or whether changing the background-position values has any effect?
posted by theiconoclast31 at 3:29 PM on September 25, 2008

If you're absolutely positive that there are no errors in your code, is it possible that one or more of your non-working (artisticROLL) images are not named what you think they are? Like, you've used some lowercase instead of a capital letter, or png instead of jpeg...something like that. OR that you have the artisticROLL images in a folder other than the one you're linking to...a sub-directory or some such thing. Just throwing out ideas here. You can mefimail me the page and I'll look at it.
posted by iconomy at 3:31 PM on September 25, 2008

Response by poster: Sent you a MeFiMail, theiconoclast.

The images themselves load fine from the browser, and all the tinkering I've done with the code has been to no avail.
posted by reductiondesign at 3:35 PM on September 25, 2008

Response by poster: Everything is in one folder; it's messy, but I hate dealing with sub-directories.

It's not a filename issue, either--this is happening in about ten different instances.

About to send you the site, iconomy.
posted by reductiondesign at 3:36 PM on September 25, 2008

It may fix things if you declare the background-image on the pseudoclasses. This is what I generally do, and it works:

.button_class {
background:transparent url(button.gif) 0 -60px no-repeat;
}

.button_class:hover {
background:transparent url(button.gif) 0 -30px no-repeat;
}

.button_class:active {
background:transparent url(button.gif) 0 0 no-repeat;
}
posted by timoni at 3:45 PM on September 25, 2008

Response by poster: Sorry, timoni, didn't help anything.
posted by reductiondesign at 3:52 PM on September 25, 2008

Have you validated your CSS? Little typos are easy and they can take hours to notice.
posted by Rhomboid at 4:05 PM on September 25, 2008

Response by poster: Total n00b question: how does one go about validating CSS?
posted by reductiondesign at 4:07 PM on September 25, 2008

http://jigsaw.w3.org/css-validator/
posted by theiconoclast31 at 4:09 PM on September 25, 2008 [1 favorite]

Had something similar and found out that while it worked locally, my host makes a distinction between upper case and lower case. I note that you have contactROLL.jpg. Is the file actually called ContactRoll.jpg or contact.roll.jpg? Googling contactROLL.jpg brings up only one example of contactROLL.jpg, which is this question. All other examples are using lower case.
posted by TheRaven at 4:10 PM on September 25, 2008

Response by poster: Validation doesn't show anything that either I haven't fixed (class starting w/ numbers) or isn't relevant (font).
posted by reductiondesign at 4:13 PM on September 25, 2008

Response by poster: TheRaven, I'm pretty sure all my links to files match the capitalization exactly. I'll double check, but I'm normally pretty good about that.
posted by reductiondesign at 4:14 PM on September 25, 2008

Just because it's how I tend to write my links in CSS, does stripping the "a" before the classname help?:

.artisticroll:link { display: block; width: 200px; height: 23px;background-image: url('artisticROLL.jpg'); }
.artisticroll:visited { display: block; width: 200px; height: 23px;background-image: url('artisticROLL.jpg'); }
.artisticroll:hover { background-position: 0 23px;}
.artisticroll:active { display: block; width: 200px; height: 23px;background-image: url('artisticROLL.jpg'); }
posted by backwards guitar at 5:18 PM on September 25, 2008

Try removing the quotes from around the image filenames in the CSS:

url('contactROLL.jpg');
becomes
url(contactROLL.jpg);

I have a vague memory of that causing the same problem for something I was working on a while back.
posted by camcgee at 5:28 PM on September 25, 2008

Experiment self link. Also CSS old and out of date in these modern times.
posted by bjgeiger at 5:28 PM on September 25, 2008

I see a few unclosed tags in your html - img tags and the paragraph tag. Not sure if that makes a difference, but I haven't had a chance to delve into it yet.
posted by iconomy at 5:59 PM on September 25, 2008

Hey, you fixed it! What worked?
posted by iconomy at 6:00 PM on September 25, 2008

iconomy: "Hey, you fixed it! What worked?"

He added both style and class attributes to his <a> tags. Use external CSS if you can and inline CSS if you must. But if you mix them together, cuddly baby dragons will die.
posted by theiconoclast31 at 8:58 PM on September 25, 2008