Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > [CSS] How to combine anchor tags w/o underlining images on hover

Reply
Thread Tools

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

 
 
DC
Guest
Posts: n/a
 
      12-31-2005
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.

--
DC Linux RU #1000111011000111001

The word 'politics' is derived from the word 'poly', meaning 'many'
and the word 'ticks', meaning 'blood sucking parasites'.
 
Reply With Quote
 
 
 
 
Rob McAninch
Guest
Posts: n/a
 
      12-31-2005
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.

--
Rob McAninch
http://rock13.com
 
Reply With Quote
 
 
 
 
DC
Guest
Posts: n/a
 
      01-01-2006
Rob McAninch wrote:
> 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.


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)


--
DC Linux RU #1000111011000111001

The word 'politics' is derived from the word 'poly', meaning 'many'
and the word 'ticks', meaning 'blood sucking parasites'.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Incorrect Anchor Hover Background Image InteXX HTML 3 10-14-2009 04:52 AM
Combine HTML tags with a DOM text node element? Robert Oschler Javascript 1 08-29-2005 11:44 AM
DOM Anchor Hover attribute skipc@valley.net Javascript 2 08-29-2005 12:56 AM
FF1.04 underlining urls Wygtya Firefox 3 06-16-2005 11:36 AM
underlining on websites =?Utf-8?B?a21uZXdidXJu?= Microsoft Certification 2 05-25-2004 05:31 PM



Advertisments