[CSS] How to combine anchor tags w/o underlining images on hover

[DC]

Given:

a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}


Case #1

<p>
<a href="http://www.conservative.ca/">
<img src="images/logo_cpc_e.png" />
Conservative Party of Canada
</a>
</p>


Case #2

<p>
<a href="http://www.conservative.ca/">
<img src="images/logo_cpc_e.png" />
</a>
<a href="http://www.conservative.ca/">
Conservative Party of Canada
</a>
</p>

* markup simplified for clarity (I'm not an idiot }:O)


PROBLEM:

Same css for both cases. In case #1 (shared anchor tag), hover causes img to
be underlined along with the link text. Ugly. However, in case #2, img not
underlined on hover.

Why?

I don't want the unnecessary bloat from duplicating anchor tags. Can I
achieve this with css? What am I doing wrong? I'm sure it is something
simple but I can't suss it.

Thanks.

 

[Rob McAninch]

DC>:

Same css for both cases. In case #1 (shared anchor tag), hover causes img to
be underlined along with the link text. Ugly. However, in case #2, img not
underlined on hover.

Why?

Hm, I don't get an underline in case 1. But the underline may not be
visible with the image border present. You could turn off the border
for the image, however the image will no longer be distinguished as
a link.

Or try styling, A:hover IMG { } in some manner.

I can't duplicate your conditions so I'm not sure what you're seeing.

 

[DC]

DC>:

Hm, I don't get an underline in case 1. But the underline may not be
visible with the image border present. You could turn off the border
for the image, however the image will no longer be distinguished as
a link.

Or try styling, A:hover IMG { } in some manner.

Okay...

<clickety>

This works:

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

....however, it apparently cannot co-exist with this:

a:hover {
color:#E39243;
text-decoration:underline;
}


FWIW, elsewhere in my stylesheet is this:

/******* images *******/

img {
border:none;
}


Basically, I have both text and an img inside a single anchor tag and I
want the hover to cause the text link to be underlined but to not affect
the img link. I'd like to not have to use two anchor tags.

Please be gentle -- I'm just getting my feet wet again after a 2+ year
hiatus. }:O)