---

Introduction

Trigger for this Internet Explorer workaround was a question in the css-discuss mailing community:

• "If you use a background image to create a custom underline for links, IE has trouble if the link spans multiple lines." Then only the underline in the bottom line is displayed, not the part of the link in the line(s) before. Is there some workaround?

Referred was to Stuart Robertson's article "Css design: Custom Underlines" in ALA (A List Apart).

• "Since the underline graphic is positioned at the bottom of the link element, we need to ensure that our links do not span multiple lines. (If they were allowed to span multiple lines, then only the linked text on the lower line would display the custom underline.)"

That is true, but only for IE!

• "We'll use the CSS white-space property to prevent our link text from wrapping."

That is possible, but it can be not so beautiful, or even dangerous.

Not so beautiful
The text link (if needed) jumps to the next line, leaving a gap on the right side in the line before.

Or even dangerous
A { white-space: nowrap; } can be dangerous if the words of the text link together can have a width that is bigger than the with of the surrounding box (long link or small box; font-scaling alert too!).

In FF and others, the link will jump out of the surrounding box, and will cover other parts of the page (or been covered by other parts, depending on the layering).

 

In IE it will stretch the surrounding box, and disturb the page lay out or break the page dramatically (dropping down other columns, for instance).

- Back to basic. Reading some of the 66 comments, I saw the same question "but how IE?" was launched over there. And because comment #65 pointed to IE too (#66 did not solve), I supposed in between there was no IE-solution launched. But I didn't look further, I got an idea!

The idea: almost too simple

While in IE the line wrapping is "breaking the continuity of the link" and prohibiting the underline to be displayed, we have to accomplish that the link cannot be broken.

Then the solution is obvious: split up the link in words with each the image underline style, for (in general) words don't break 'cause of a line break.

The css coding

First thought was to make <span>'s around each word, but this would give lots of span's, - and I don't like lots of <span>'s inside my html: too crowded to see where the text is. And as I'm lazy, I don't like to make them either!

But what is the tag for underline? An <u> ... so we are going to style the <u>. It is only a one letter tag that we have to add, and while a <span> in the html can be everything (you have to see what it means in the stylesheet), an <u> makes clear that it is underlining. The easy way!

But first there has to be some good space between the lines, enough for the image underlining we want.

• As in the ALA-article, like the most of the other coding.

The distance is depending on the image: in the example above is used a 160% line-height. We create a "long-link-box" class for the paragraph(s) in which the long link(s) will come:

.long-link-box p {
     line-height: 160%;
}

When we are in the middle of the link <a>...</a>, the normal underline of the <u> has to be removed:

.long-link-box a u { 
     text-decoration: none;
}

To finish, we add the background image with some extra padding at the bottom of the line (so the line height doesn't have to be enormous). A small image, repeating in horizontal direction, is used in the example. If there is color behind the whole line in the image, it has to get enough height to fit at large font-sizes. The position is at the bottom of the view port, then it stays at the bottom at font-scaling. Together, the style for our <u> is:

.long-link-box a u { 
     text-decoration: none;
     background:
     url('images/underline-link.gif') repeat-x 0 100%;
     padding-bottom: 3px;
}

For Opera8.5 and Netscape6 this is not enough. For Opera has to be added positioning and z-index, otherwise the <a> text decoration is coming on the foreground though.

.long-link-box a u { 
     position: relative;
     text-decoration: none;
     background:
     url('images/underline-link.gif') repeat-x 0 100%;
     padding-bottom: 3px;
     z-index: 1;
}

For Netscape this doesn't work; seems NS always shows a link underline, regardless of giving a higher z-index to the <u>.
 

Attention: accessibility-improvement!
Locus Optimus pointed me to an accessibility gap (which is also in the technique of the ALA article). I found the following rescue.

Unlike in the ALA-article, we do not disable the text-decoration in the <a> style. This means that for the whole link the underline is still there. But because of the padding of the <u>'s we don't see this. Advantage: visitors with images off and css enabled can see there is a link! Otherwise they don't see anything... 

• Unless the link text has an other color than the normal text - but that can give other accessibility issues (for colorblind people), and also usability problems. For the common expectation is: "a link can be seen by his underlining" or "if no underline, then apparently no link" - and there they are cut off from your important link...

The html

Everything being prepared, we now just have to add the <u></u>'s to the long link. The space between the words we include in the tags: they have to be underlined too.

<div class="long-link-box">
  <p>This is also a <a href="#nowhere"><u>long </u>
  <u>link </u><u>leading </u><u>to </u><u>nowhere </u>
  <u>but </u><u>long </u><u>enough </u><u>to </u>
  .....
  </a>.</p>
</div>

Evaluation

Yes, for a link of about 2 to 5 words it is fine, but when used on very long links it is a bit of tag-soup.

• Personally I never use long long links, I think long links should not exist in a web page. - They draw lots of extra proportional attention, and make the texts more difficult to read: as well the text of the link as the normal text around it.
• While this point of view is for normal underlining, for image underlining it can be multiplied!

 

A second remark. In case the image underlining is quite different from normal link underlines, then it can happen that more or less visitors don't understand that the beautiful underlines are links to click on...!

So: if using, be very careful and consider the accessibility of it.
I see the use of it in just some small accents, a finishing touch - and not too much more.

Bonus
Of course this technique is not limited to link underlines: can be used for adding an "unbreakable" image background to parts of a normal text too.
 

Enjoy the beauty of css!

12 may 2005