CSS - Image links are underlined

[fanderson]

I have a series of four images with text that are all a hrefs. I would like the text to be underlined but not the photographs. The xhtml is like this:


<a href="docs/New_Patient_Form.pdf"><img class="forms" src="photos/form-new_patient.jpg" alt="New Patient Form" /><br />
New Patient Form</a>

The CSS looks like this:


.forms a:hover img{
text-decoration: none;
}

Any suggestions for getting rid of the underline under the image?

Thanks.

[fasterthanlight™]

wrap your text with a span and add this css
<a href=""><img src=""/><br/>
<span>New Patient Form</span></a>


#divwheremylinksare a:hover span {
text-decoration: underline;
}


as long as you are applying the underline to the span element, the image will not be affected

and the reason why your text-decoration:none; isn't working is because the underline is being applied to the anchor tags (<a></a>) and not the <img> because the image is within the anchors

[fanderson]

I tried it the way you suggested which was closer but I found real success by breaking out the img and the text and wrapping a link around them separately. Thanks.

[fasterthanlight™]

That works too!