Advanced underline links

1

Is there a way for links to only underline where there is text and not underline when there are spaces? I’d like to do this:


<a href="link.html">
   <img src="image.gif" />
   text
</a>

But the space between the image and the text is being underlined. This forces me to write longer code:


<a href="link.html">
   <img src="image.gif" />
</a>
<a href="link.html">
   text
</a>
2

Not possible, as far as I know.

3

The only way to do this (without some crazy Javascript) is to remove the default underlining through CSS:


a{
  text-decoration:none;
}
.under{
  text-decoration:underline;
}

Then wrap your actual text in a span:


<a href="link.html">
   <img src="image.gif" />
   <span class="under">text</span>
</a>

It’s about the same amount of complexity, without the redundancy.

4

Another problem with underlined spaces is:


<a href="#">
   will have underlined space to the left and right of this link in IE
</a>
<a href="#">No unexpected underlining in any browser</a>

I prefer to use the first method, because sometimes I have some heavily nested structures inside a link and would like my code to look cleaner. Any solution for this incompatibility?

5

You’ve already hit upon the solution: remove the extraneous whitespace. Sometimes it’s helpful to remove the closing [font=monospace]>[/font] and move it to the next line at the beginning of the text, and do the same on the opposite site:


<a href="#"
   >will have underlined space to the left and right of this link in IE</a>

but usually your second example is better.

6

Take the n00b way out and just redirect them to the download Firefox page if they visit your site in Internet Explorer.