Superscript underline in IE

Question

I'm going to be brief because I'm short on time, so I apologize if this isn't as detailed as I'd like it to be.

I have some code:

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

In FF, this works like I would like, the link as a whole is underlined. However in IE, the link is underlined except under the ® where it looks like a symbol above a hyphen and is rather ridiculous looking.

I've tried several suggestions I found on Google, but none of them are very helpful in achieving the desired effect. Adding a border to the bottom is not an option unfortunately. So far the best solution is to break the underline completely at the sup tag with CSS which still leaves it working fine in FF while still looking less silly in IE.

If anyone could help with this it would be most appreciated, I'd rather not go through the site removing <sup> tags as I've been told I will have to do should I not solve this dilemma.

UPDATE: Went with the sup {"text-decoration:none" } solution, it'll do for now. There are reg marks everywhere, so the whole site would've had to have been updated, which was more trouble than it was worth we all decided. Thanks to those who replied.

Solution 1

The <sup> tag isn't great for things like trademark and reg symbols.

I prefer doing it with css:

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

If you can set up a .reg class:

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

For:

<span class='reg'>&reg;</span>

Solution 2

Sometimes you're not allowed to add class to a link or wrap it with any element. The situation is not so rare when you need to work with third-party code. BTW, same problem with element too.

In this case you can use something like this:

1. Leave underlining as is for Firefox (all look OK)

2. Use such styling for Chrome (it has same problems like IE, even harder):

   [style]
   a sup {
       text-decoration: none;
       display: inline-block; // without this previous property will not work
       border-bottom: 1px solid;
       line-height: 1.5em;    // this and following properties are used to shift
       margin-top: -1em;      // an element to make border aligned with underline
                          // can be used relative position or something else.
   }
   a sub {
       text-decoration: none;
       display: inline-block;
       vertical-align: middle;
       border-bottom: 1px solid;
       line-height: 0.7em;
   }
   [/style]
   [a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
   

   • sorry for []s in tags, I still can't undestand how this f*** system makes code samples - when I try to format as it wants, I get a mess.

Solution 3

Well it is not an elegant solution, basically use a border instead of an underline. You would have to code the color of it based on "Active, Visted, Etc"

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

Eric

Solution 4

I made it work like this

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

Solution 5

Eric's solution is the closest. He doesn't need to have display: inline since <a> elements are inline elements. only thing that he is missing is the line-height so that you can see the border bottom on IE 6, and IE 7. Otherwise, you won't see the line.

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

View more solutions

Comments

[Blair Scott]

Yeah the reg mark in the sop element is a whole other issue that just complicates things. It has to do with the fonts we use basically not being consistent in their treatment of said mark.

[mhenry1384]

This isn't a perfect solution because a 1 pixel bottom border is thicker than an underline. At least in Chrome 11, it's twice as thick.

[Snowalker]

this solved my issue. The bottom border is definitely not the perfect solution but is doing a pretty decent job.