Separate formatting for link text & link image?

**may_hem1** · Nov 17, 2003 00:52

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