Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Separate formatting for link text & link image?

Status
Not open for further replies.
may1hem

may1hem

Programmer
Jul 28, 2002
262
GB
Hi, I have a Web page with a text link and an image link (clickable image). I want to use CSS to give the text link a dotted underline and I want the clickable image to have no formatting.

I tried using this style code:

---------------------
a:link {
border-bottom: 1px dotted;
}
---------------------

..but this gives both the text AND the image a dotted underline. I only want the text to have the dotted underline. So I tried this:

---------------------
<html>
<head>
<style>
a:link {
border-bottom: 1px dotted;
}

a img {
border-bottom: 0px none;
}

a > img {
border-bottom: 0px none;
}

a:link img {
border-bottom: 0px none;
}

a:link > img {
border-bottom: 0px none;
}

a + img {
border-bottom: 0px none;
}
</style>
</head>

<body>

<tr valign=&quot;middle&quot;>
<td align=&quot;center&quot;>
<a href=&quot;link.html&quot;>
<img src=&quot;thumb.jpg&quot; width=&quot;60&quot; height=&quot;60&quot; border=&quot;1&quot;>
</a>
</td>
</tr>
<tr>
<td align=&quot;center&quot;>
<a href=&quot;link.html&quot;>
<font size=&quot;1&quot;>
Click here to find out more.
</font>
</a>
</td>
</tr>

</body>
</html>
--------------------

I know that I've tried lots of different style selectors but I was hoping that one of them would work. Unfortunately not. I find that still both the text and image have a dotted underline.

Does anyone know how to solve this? Surely there must be a straightforward way without using classes?

Thx,

May
 
Sort by date Sort by votes
Hmmm, it really seems there is no simple solution to this except for creating different classes. The problem is, that border applies to the invisible block surrounding every link. What you were doing with your CSS was defining how a border around the image should look when image has a link. But AFAIK, you cannot set a style for an element depending on what children it holds (what you are trying to do: if you hold text, have the border, if you hold picture, don't).
 
Upvote 0 Downvote
Use classes!

Btw, <font> is obsolete, you should try to avoid using it if possible, especially when you are already using CSS.





<!--#sig value=''É'' url='' -->
 
Upvote 0 Downvote
Or, if you don't want to use classes (which there's really no reason no to), try putting your regular link text in a <span> tag. Then apply the border to the span:
Code: 
a{text-decoration: none}
a span{border-bottom: 1px dotted}
a img{border: 0px;}

Here's an example using a class:
Code: 
<style>
  a{text-decoration: none}
  a.dotted{border-bottom: 1px dotted}
  a img{border: 0px;}
</style>
...
<a class=&quot;dotted&quot; href=&quot;link.html&quot;>Link text</a>
<a href=&quot;link.html&quot;><img src=&quot;image.gif&quot;></a>

I had to put in the &quot;text-deoration&quot; to remove the normal underline under links. Without that, it was showing the underline in both IE and Mozilla.

You can also do &quot;a.dotted:hover&quot; to define how you want your normal link text to appear when the mouse is moved over it (like maybe change its color).

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
Thanks for your advice!

Kevin, I made it work in a similar way using DIV tags.

As Cian & Vragabond said, classes are the way forward here.

Thx,
May
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
215
Alt255
Alt255
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
233
jjgupta915
jjgupta915
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
226
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top