Nerdaphernalia

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!