HTML tags sub and sup don’t work for you. What now?

Cursing helps, but not enough

If you’ve been at work coding and troubleshooting all day, and then something simple like a superscript tag doesn’t work, it can be frustrating. It’s one of those endless issues developers and designers face every day for which answers are sometimes elusive.

Why would an html tag like sup (Superscript) suddenly not work? Google searches come up empty. It’s 2am, you’re sleep deprived and having trouble articulating the search and that may be a contributing factor.

Here’s where to look

When a widely supported html tag like sup or sub is not working, look for conflicting css.

A great place to start is by searching the Reset statement applied at the top of the css. Sub and Sup are usually part of this reset, which means they’ve been neutralized in your theme initially to protect you from inconsistent browser specific defaults.

Why does this happen?

The goal of a reset stylesheet is to reduce browser inconsistenciesEric Myers. The problem isn’t in the reset but in the theme author’s failure to redefine tags like sup and sub in their css. Here’s an example of a typical reset. Richard Clark’s code is based on Eric Meyers work:


/*!
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark – http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

Here’s How to Fix It

Since sub and sup have been reset — which again means they no longer do anything — you need to get them back into your style sheet.

As mentioned earlier, resetting tags is a good thing… That said, it’s probably not a good idea to just delete or comment out the broken tag from the reset code, which granted would make them work again — but inconsistently across browsers, which is why the reset in the first place.

When the theme author fails to redefine specific tags, the best approach is to do it yourself. Here’s some css to help you define sup and sub so they work again. Feel free to use as is or tweak it to your own liking.


sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}

Found this useful?

Don’t miss a tip. Have them automatically emailed by using the subscription form in the footer of this page. Don’t forget to click the link in the confirmation email to complete the process.

In case your interested, the subscription form is part of the WordPress JetPack plugin. Spam is strongly discouraged and you will always be able to easily manage your subscription.

2 Responses to “HTML tags sub and sup don’t work for you. What now?”

  1. Stacy

    Thank you! This little tip just saved me from hours of frustration trying to figure out why my superscript code wouldn’t work!

    Reply

Leave a Reply