CSS Hover

[Justin_]

I just can't figure it out...

CSS:

css:

a#button1 {     display: block;     width: 70px;     height: 37px;     background-image: url(/buttons/img0.jpg);     margin: 0 auto; } a#button1:hover {     background-image: url(/buttons/img1.jpg); } a .alt { display: none; }

XHTML:

HTML:

<a id="button1" href="#"><span class="alt">Push!</span></a>

When I use this code my images dont display. The paths are correctly specified because I can view both images using the <img> element. The goal is to get my buttons to push down when you hover over them but this just doesn't seem to be working, any ideas why?

[Justin_]

Note this was directly copied from this site: http://www.edginet.org/techie/website/cssimg.html#

I have gotten this to work before but for some reason I couldn't get it to work so i figured maybe a syntax error and sure enough even with this code i get nothing...

[rdrake]

Just a little nitpick I have... perhaps try quoting the path inside the url();? Not sure what browser you're using, but IE doesn't support anything besides the a tag for :hover. For that you'll need to resort to javascript.

code:

<a href="blah" style="background-image: url('/img/blah.png');" onmouseover="this.className='over_class'" onmouseout="this.className='out_class'">link</a>

That's an alternate way of trying it anyways.

[Amailer]

One way to do this is:

HTML:

<div class="button"><a href="index.html"><span style="display: block;">&nbsp;</span></a></div>

css:

.button a {     display: block;     width: 70px;     height: 37px;     background-image: url(/buttons/img0.jpg);     margin: 0 auto; } .button a:hover {    background-image: url(/buttons/img1.jpg); }

See if that works, its almost the same thing as what you posted.
Works on Firefox, Opera, IE 6 (not sure if it works on 7), Safari, Firefox Mac, Camino or w/e