Border on text hyperlinks, but not on image hyperlinks!

[Seefor]

Hi, I want my text hyperlinks to have a dotted border underneath, so I did
this which works fine:

a,
a:link,
a:visited,
a:hover,
a:active {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}

But I don't want a border under images which are hyperlinks.
I tried this but it doesn't work:

img {
border: 0;
}

I've also tried:

a img,
a:link img,
a:visited img,
a:hover img,
a:active img {
border: 0;
}

Is there anyway of having a border on text hyperlinks but not image
hyperlinks? I don't want to use classes if I can avoid it.

[Jukka K. Korpela]

"Seefor" <in*****@email.address> wrote:

Hi, I want my text hyperlinks to have a dotted border underneath,
Stop wanting that. It would confuse users, since a dotted border underneath
does not signal "I am a link". To many users, it signals "I am an
abbreviation or an acronym".
so I did this which works fine:

a,
a:link,
a:visited,
a:hover,
a:active {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}
It certainly doesn't work. You destroy the color distinctions too, which is
especially harmful when you remove the underlining as well. You also set
color against an unspecified background.
But I don't want a border under images which are hyperlinks.
This problem vanishes as soon as you stop creating the problem with text
links.
I tried this but it doesn't work:

img {
border: 0;
}
It probably works as designed, though not the way you expected.
Is there anyway of having a border on text hyperlinks but not image
hyperlinks? I don't want to use classes if I can avoid it.

You can't avoid using classes (or other special methods). There is no way in
CSS to express a selector that means "elements that contain...", only
selectors of the form "elements contained in...".

Just let links be links, m'kay?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Ed Mullen]

Seefor wrote:

Hi, I want my text hyperlinks to have a dotted border underneath, so I did
this which works fine:

a,
a:link,
a:visited,
a:hover,
a:active {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}

But I don't want a border under images which are hyperlinks.
I tried this but it doesn't work:

img {
border: 0;
}

I've also tried:

a img,
a:link img,
a:visited img,
a:hover img,
a:active img {
border: 0;
}

Is there anyway of having a border on text hyperlinks but not image
hyperlinks? I don't want to use classes if I can avoid it.

If you must ...

a:hover.active2 {
[stuff you want in here];
}

Apply <a class="active2" ...> to the image links.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://nothing.edmullen.net
Where do forest rangers go to get away from it all?

[Eric Lindsay]

In article <Xn*****************************@193.229.4.246>,
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote:

Is there anyway of having a border on text hyperlinks but not image
hyperlinks? I don't want to use classes if I can avoid it.
You can't avoid using classes (or other special methods). There is no way in
CSS to express a selector that means "elements that contain...", only
selectors of the form "elements contained in...".

The original question does make me wonder whether you couldn't manage to
style an image link in a different manner to a text link, without a
class, as requested. That could be handy for a page I have with
thumbnail images. Images are inline and are all contained in
paragraphs. The page is commercial, so it contains no other links apart
from navigation. Navigation links are all in lists. THe question is
making me think a lot harder about how to plan my HTML for later styles.
Plus the potential for retrofitting styles without altering existing
pages makes it interesting.

What made me think about being able to avoid classes was
http://www.jasonspage.net/blog/nodiv/ which shows a two column, plus
header and footer page styled entirely without div, span, id or class.
Just let links be links, m'kay?

I hate Hunt the Link pages.

--
http://www.ericlindsay.com

[Adam Risser]

Here is a solution that works in firefox 1.5 and not IE.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> New Document </title>
<style>

a {
text-decoration: none;
border-bottom: 1px dotted #000;
}

img { display: block; }

a:first-child:last-child {
border-bottom: 0px dotted #000;
}

</style>
</head>
<body>
<a href="http://www.google.com">This is a link</a>

<br /><br />
<br /><br />

<a href="#"><img src="http://www.google.com/intl/en/images/logo.gif"
border="0" ></a>

<br /><br />
<br /><br />

<a href="http://www.google.com">This is a link</a>

</body>
</html>

This is not practical, but i think this is as close as you can get.
Any thoughts?

Adam
http://www.adamrisser.com