HTML Tip: Cross-browser <sup> tags

If you’ve ever used the HTML <sup> tag on a web page, you’ve probably noticed that it has a tendency to do strange things in various browsers. The most common effect is that the line height of that one line of text is pushed up, leaving a small but noticeable gap in the text.

This has always irritated me, as <sup> is a prefectly useful tag, and should be usable without messing up the appearance of a page.

After a bit of experimenting, I think I’ve found a solid, simple, cross-browser solution. All you need to do is put the following in your CSS file:

sup {
position: relative;
top: -3px;
vertical-align: top;
font-size: 90%;
}

This appears to standardize the various ways that different browsers render <sup>erscripted text, and it also eliminates that pesky line-height gap!

This entry was written by Stephen R, posted on January 3, 2008 at 11:37 am, filed under Webcraft and tagged , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

9 Comments

  1. andrux
    #1 | Posted February 20, 2008 at 4:57 pm

    great man, thanks! works perfectly!

  2. Maestri
    #2 | Posted November 20, 2008 at 1:51 pm

    BE”H
    It worked perfect.
    You know things…
    Thank you.

  3. Moobi
    #3 | Posted November 24, 2008 at 12:00 am

    Nice, dude. That’s exactly what I was looking for.

  4. Rich
    #4 | Posted January 20, 2009 at 8:41 am

    Thanks a lot. 2 minutes to find this on Google. 2 minutes to change the CSS, upload and test (+ 1 minute to write this). So in 5 minutes the problem is fixed. Very nice of you to post this.

  5. Frank
    #5 | Posted March 20, 2009 at 3:41 pm

    Thanks a lot for this tip!
    My problem is now solved.

    Thanks again.

  6. Luke
    #6 | Posted April 13, 2009 at 10:21 pm

    Thanks, very helpful indeed.

  7. Mark
    #7 | Posted May 11, 2009 at 5:58 am

    Great – what I search for :-)

  8. Rodrigo
    #8 | Posted July 29, 2009 at 8:41 am

    Thanks dude! My problem solved the same way as @Rich.

  9. Austin
    #9 | Posted August 16, 2009 at 11:00 pm

    Thanks, man! You rock!

Post a Comment

Your email is never shared.

Subscribe without commenting