Geek Answers Handbook

Superscript underscores in IE

I am going to be brief because I do not have enough time, so I apologize if this is not as detailed as I would like.

I have a code:

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

In FF, this works as I would like, the link is generally underlined. However, in IE, the link is underlined, except in & reg; where it looks like a symbol over a hyphen and looks pretty ridiculous.

I tried several suggestions that I found on Google, but none of them really helps in achieving the desired effect. Unfortunately, adding a border to the bottom is not an option. So far, the best solution has been to break the underline completely into a sup tag with CSS, which still leaves it workable in FF, but in IE nonetheless looks silly.

If anyone could help with this, it would be very appreciative, I would prefer not to go through the site by removing the <sup> tags, as I was told what I would have to do if I did not resolve this dilemma.

UPDATE: Went with the solution sup {"text-decoration: none"}, now it will be done. There are reg-tags all over the world, so the whole site had to be updated, which was more trouble than it was worth what we all decided. Thanks to those who answered.

+4
source share
8 answers

The <sup> not suitable for things like trademark and register characters.

I prefer to do this with css:

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

If you can customize the .reg class:

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

For:

 <span class='reg'>&reg;</span>
+6
source

Sometimes you are not allowed to add a 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, the same problem with the item too.

In this case, you can use something like this:

  • Leave the underline as it is for Firefox (everything looks fine)

  • Use this style for Chrome (it has the same problems as IE, even more complicated):

      [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 the [] s in the tags, I still can’t understand how this f *** system creates code samples - when I try to format as I want, I get a mess.
+4
source

Well, this is not an elegant solution, basically use a frame instead of an underline. You will need to encode its color based on "Active, Visted, Etc"

 <style type="text/css"> au { text-decoration: none; border-bottom: 1px solid black; display: inline; } </style> <a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

Eric

+3
source

Eric's solution is the closest. It does not need to have display: inline , since the <a> elements are inline elements. The only thing it lacks is line-height so you can see the bottom border in IE 6 and IE 7. Otherwise, you won't see the line.

 <style type="text/css"> au { text-decoration: none; border-bottom: 1px solid black; line-height: 1.5em; } </style> <a href="#123" class="u">CHEESE<sup>&reg;</sup></a>
+1
source

I made it work

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

Well, I agree that this looks awful, but it looks like IE combines underscore and superscript. I suggest you go with your CSS plan to remove the underline for a sup if you cannot fool the border. There is only an IE property called text-underline-position , but it does not have any value, which helps here or I'm afraid.

In the interests of anyone who no longer knows what will be:

 a sup{text-decoration:none;}
0
source

As Diodeus says, and a little research, as a rule, agrees, I understand that the reg-mark will not be included in the sup element in any case.

So, assuming that we are only addressing the sup / underscore problem and forget that we are referring to the reg label, the only solutions I know to make them “look” are to do vertical-align: baseline or kill text-decoration on sup.

0
source

The border-bottom solution will place the line under any "p" "q" or "y", and not through the lower legs of the letters. This is 2px lower than underline.

An alternative is to create a <a> position: relative
make <sup> position: absolute; top: -3px; text-finish: no;

add extra & nbsp; after </sup>

-1
source

More articles:


All Articles