Fix broken <a> decoration with multiple spans

Forum Moderators: not2easy

Message Too Old, No Replies

Fix broken <a> decoration with multiple spans

mebigfatguy

2:24 am on Oct 19, 2009 (gmt 0)

So, i have

and the underline for my <a> is broken, which i don't want. How do i get the anchor underline to be one unbroken line under both the R and the 5?

thanks.

D_Blackwell

3:01 am on Oct 19, 2009 (gmt 0)

In FF and Opera it is one unbroken line. Only IE is raising the baseline for that portion of the link. I assume that you are using the class .superscript to hack around this.

If you've got to have it, it can probably be done, but <sup> is valid HTML4 and will be valid HTML5. The class is a big hack to the code, especially if you have very many links. I would be inclined to live with it.

HTML 4
[w3.org...]

HTML 5
[dev.w3.org...]

Even hacking the font-size: and vertical-align: in a class won't drop the raised baseline in IE. I don't know what else to use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.superscript {
font-size: 60%; vertical-align: top;
}
</style>
</head>
<body>
<div>
<a href="#">R<sup>5</sup></a>
</div>
<br /><br /><br />
<div>
<a href="#">R<span class="superscript">5</span></a>
</div>

</body>
</html>

D_Blackwell

3:37 am on Oct 19, 2009 (gmt 0)

IF you can live without the text-decoration: with <sup>, AND IF, you can live with the shorter text-decoration:, THEN the following will remove it from <sup> in IE, but FF and Opera will not recognize the declaration

I would use as conditional comment if I used it. It will remove the raised text-decoration: in IE7,8 if you find it unsightly - especially if there are characters after the <sup>, because IE will restore the baseline after closing <sup>.

a sup {
text-decoration: none;
}

sup {
text-decoration: none;
}

mebigfatguy

3:47 am on Oct 19, 2009 (gmt 0)

I made it look good enough by removing the text decoration, and adding a bottom-border to the anchor.

D_Blackwell

4:03 am on Oct 19, 2009 (gmt 0)

This hack will work in FF, Opera, IE. Remove the text-decoration: from the link completely. Then add a 1px border-bottom: to match the unvisited link, and switch the border to purple after the link in the class is visited.

CSS:
.super a {
text-decoration: none; border-bottom: 1px solid #00e;
}
.super a:visited {
border-bottom-color: #551a8b;
}

HTML:
<div class="super">
<a href="http://www.example.com">R<sup>5</sup></a>
</div>

<edit> Specifying hex color for 'blue'. </edit>

[edited by: D_Blackwell at 4:11 am (utc) on Oct. 19, 2009]

D_Blackwell

4:06 am on Oct 19, 2009 (gmt 0)

I made it look good enough....

I would say perfect. Probably wouldn't be my choice, but should be nearly indistinguishable from standard link.

You were posting while I was double-checking browsers.