# Advanced underline links

**URL:** <https://forum.kirupa.com/t/advanced-underline-links/264922>\
**Category:** Uncategorized\
**Created:** [July 2, 2008, 4:51am UTC](https://forum.kirupa.com/t/advanced-underline-links/264922 "2008-07-02T04:51:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [July 2, 2008, 4:51am UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/1 "2008-07-02T04:51:37Z")

</div>

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:

```auto

<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:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Jeff\_Wheeler](https://avatars.discourse-cdn.com/v4/letter/j/59ef9b/32.png) [@Jeff\_Wheeler](https://forum.kirupa.com/u/Jeff_Wheeler)\
**Post date:** [July 2, 2008, 5:12am UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/2 "2008-07-02T05:12:49Z")

</div>

Not possible, as far as I know.

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [July 2, 2008, 7:20am UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/3 "2008-07-02T07:20:00Z")

</div>

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

```auto

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

```

Then wrap your actual text in a span:

```auto

<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.

---

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [July 4, 2008, 4:18pm UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/4 "2008-07-04T16:18:37Z")

</div>

Another problem with underlined spaces is:

```auto

<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?

---

<div class="post-metadata">

**Author:** ![Jeff\_Wheeler](https://avatars.discourse-cdn.com/v4/letter/j/59ef9b/32.png) [@Jeff\_Wheeler](https://forum.kirupa.com/u/Jeff_Wheeler)\
**Post date:** [July 4, 2008, 4:51pm UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/5 "2008-07-04T16:51:34Z")

</div>

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:

```auto

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

```

but usually your second example is better.

---

<div class="post-metadata">

**Author:** ![Esherido](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/esherido/32/2158_2.png) [@Esherido](https://forum.kirupa.com/u/Esherido)\
**Post date:** [July 4, 2008, 5:29pm UTC](https://forum.kirupa.com/t/advanced-underline-links/264922/6 "2008-07-04T17:29:44Z")

</div>

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