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

Justin_

Thu Jul 27, 2006 12:32 pm


CSS Hover

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

I just can't figure it out...

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:

Push!


When I use this code my images dont display.  The paths are correctly specified because I can view both images using the  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_

Thu Jul 27, 2006 12:34 pm



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

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

Thu Jul 27, 2006 3:12 pm



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

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.linkThat's an alternate way of trying it anyways.


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

Amailer

Thu Jul 27, 2006 4:17 pm



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

One way to do this is:
 


.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