473,242 Members | 3,488 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,242 software developers and data experts.

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 4216
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

33
by: Thomas Mlynarczyk | last post by:
Hi, I'm looking for a way to put a 1px solid border around the image in this link: <a href="some.html"><img src="some.gif"></a> Well, that, by itself, is simple. However, I would like to have a...
2
by: Michael Winter | last post by:
I have the familiar 'thumbnail' scenario. I want to place a small border around the image when the cursor hovers above it. I use a 1 pixel, solid border around the image that changes between normal...
10
by: Imran | last post by:
Hi, I am attempting to create a CSS-driven website, in that I want to be able to control the display/content from the CSS file. I do not want to use tables. On a page, I have a background...
1
by: Trent L | last post by:
Hello, I'm having a problem where a style for a <a> tag isn't working in IE: border : 1px solid red; If you use my code below, you'll see what I mean. In IE6 on WinXP, I'm not seeing a red...
7
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
2
by: tradmusic.com | last post by:
Hi, I'm new to CSS and, following some advice, created my page like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>...
7
by: roN | last post by:
Hi, I have an image and I would like to draw a border around it, I tried: <p style="border:1px border-style:solid; border-color:#EEEEEE; background-color:#FFFFFF;"><img src="./images/header.jpg"...
16
by: FuzzyLogik | last post by:
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this...
2
by: texvanwinkle | last post by:
"WITH a border" being the defining issue. Here's the deal: I'm new to CSS, but I've managed so far to center a single line of links at the top of my home page and center an image on the bottom of...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.