Coding Forum

**may_hem1** · 11-17-2003, 01:52 AM

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:

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:

Code:

<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="middle">
	<td align="center">
		<a href="link.html">
			<img src="thumb.jpg" width="60" height="60" border="1">
		</a>
	</td>
</tr>
<tr>
	<td align="center">
		<a href="link.html">
			<font size="1">
				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

**techwench** · 11-17-2003, 09:20 AM

Off the top of my head, all I can think of is setting up different classes for each like style..

Code:

a.text:link { border-bottom: 1px dotted; }
a.img:link { border-bottom: 0px none; }

And then:

Code:

<A CLASS="text" HREF="link.html">Click Here</A>

<A CLASS="img" HREF="anotherpage.html"><IMG SRC="image.gif"></A>

Either that, or set the BORDER attribute in your IMG tag to "0".

**may_hem1** · 11-21-2003, 08:14 AM

Thanks Prissed!

The separate classes worked.

I didn't use an image border of zero because I want the images to have a small border.

May

**andrews_john** · 11-26-2003, 12:57 AM

You can also use an id - like "#pictured_link" or smth like that. Then use like <a href=... id="pictured_link">... It should work too.