468,104 Members | 1,304 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,104 developers. It's quick & easy.

Border on text hyperlinks, but not on image hyperlinks!

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.
Dec 19 '05 #1
4 4011
"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/
Dec 19 '05 #2
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?
Dec 19 '05 #3
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
Dec 19 '05 #4
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

Dec 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

33 posts views Thread by Thomas Mlynarczyk | last post: by
2 posts views Thread by Michael Winter | last post: by
1 post views Thread by Trent L | last post: by
7 posts views Thread by Bob Bedford | last post: by
2 posts views Thread by tradmusic.com | last post: by
7 posts views Thread by roN | last post: by
16 posts views Thread by FuzzyLogik | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.