HTML <sup> and <sub> not working

html

Solution

I had the same issue, which was caused due to a reset.css.

To solve this, implement the following CSS (found here: https://gist.github.com/unruthless/413930):

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em;
}

Problem

My HTML page is in some weird mode where sup and sub tags don't raise or lower the character above the line, though they do reduce the character's size as they should,. I've placed a simple ``` <body> <p class="sample" style="margin-left:10px;">X<sup>2</sup> T<sub>3</sub></p> ``` at the top of my page and what I get printed is: I've tried various fonts and sizes and reloading the page, but I haven't found anything that fixes it. If I put the same code in a jsfiddle it works fine: Does anyone know what might be going on? Thanks.

Original source