Superscript underline in IE

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

Answer 2

Well I agree it looks awful, but it seems to be just the way IE combines underline and superscript. I suggest you go with your CSS plan to remove the underline for a sup if you can't cheat with a border. There's an IE only property called text-underline-position but it doesn't have any value which helps here either I'm afraid.

For the benefit of anyone who doesn't know already that would be:

a sup{text-decoration:none;}

Answer 3

As Diodeus says, and a little research tends to agree, I understand that the reg mark wouldn't go in a sup element anyway.

So, assuming that we're only addressing the sup/underline issue and forgetting that we're referring to reg mark, the only solutions I know of to make them 'look' the same are to make vertical-align: baseline or kill the text-decoration on the sup.

Cheers,
Steve

Answer 4

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

Answer 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. other wise, you wont 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>