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 posted in Webcraft and tagged , . Bookmark the permalink.

10 Responses to HTML Tip: Cross-browser <sup> tags

  1. andrux says:

    great man, thanks! works perfectly!

  2. Maestri says:

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

  3. Moobi says:

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

  4. Rich says:

    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 says:

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

    Thanks again.

  6. Luke says:

    Thanks, very helpful indeed.

  7. Mark says:

    Great – what I search for :-)

  8. Rodrigo says:

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

  9. Austin says:

    Thanks, man! You rock!

  10. Jeremy Bentham says:

    Perfect. Thanks.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>