Superscript Underline In Ie

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('Some text^&

Solution 1:

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

I prefer doing it with css:

<spanstyle='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:

<spanclass='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"

<styletype="text/css">a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style><ahref="#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.

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