css image over

[TheCandyman]

I'm switching from javascript image overs to css on a website. Need some help as i can't seem to get a css image over working. I trying to follow the example of this:

http://www.tutorio.com/media/css-tutorials/rollover-example.htm#

I added that into my css file as:

.Contact a {
display: block;
width: 230px;
padding:0px 0px 0px 0px;
background-image: url("[URL unfurl="true"]http://www.azda.org/images/ContactAzDA.gif");[/URL] background-repeat: no-repeat;
text-decoration: none;}
.Contact a:hover { background-position: 0 -45px;}

But it doesn't show the image at all. I ran my css though

http://jigsaw.w3.org/css-validator/

and it said everything was good. In my webpage i have this

<div class="Contact"><a href="contact.asp"></a></div>

Anyone see anything wrong?

 

[vacunita]

Thats Probably becasue there is nothing to hover over. Try adding some text between the link tags <a href..>Click here</a>



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[traingamer]

This works for me

<div class="Contact"><a href="contact.asp">[COLOR=blue]link text[/color]</a></div>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[TheCandyman]

sweet, that seems to work, but it wraps:

http://www.azda.org/Public/about.asp

I resized the image to be smaller and it didn't help. How to you have to so it doens't do that?

http://www.azda.org/Public/Public.asp

 

[traingamer]

I used

		padding: [b]15px[/b] 10px [b]15px[/b] 7px;

in a stand-alone page (i.e. nothing but several links), and it looked good to me

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[TheCandyman]

Tried giving some spacing, it helps but it still wraps

http://www.azda.org/Public/about.asp

        <tr> 
                <td nowrap="nowrap" width="584"><img src="../images/wave_mid.gif" width="353" height="45" alt=""><img src="../images/sliver_sub.gif" width="1" height="45" alt=""><div class="Contact"><a href="contact.asp">Contact</a></div></td>
              </tr>

 

[TheCandyman]

Well, only thing i could get close is to put it in a column of a table, which causes display issues between IE vs FF. So going to scrap the idea, thanks for the help though!

 

[Vragabond]

Let's retract. You are trying to do a color change when somebody hovers on the contact graphic in the top right corner? You should simply add [tt]height: 45px;[/tt] to your original code then.