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 <pre class="prettyprint"><code><body> X2 T3 </code></pre> at the top of my page and what I get printed is: <img src="https://i.stack.imgur.com/8nbNc.jpg" alt="enter image description here"> 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: <img src="https://i.stack.imgur.com/clJjA.jpg" alt="enter image description here"> Does anyone know what might be going on? Thanks.

I used the following css: <pre class="prettyprint"><code>font-size:70%; vertical-align:super; </code></pre> <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code>My Stack Overflow Answer©</code></pre> </div> </div>

HTML and not working

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:

enter image description here

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:

enter image description here

Does anyone know what might be going on?

Thanks.

Is sup tag deprecated?

sup() Deprecated: This feature is no longer recommended.

How do you write 1st 2nd 3rd in HTML?

The HTML element is found within the <body> tag. The tag is used to comply with typographical standards or conventions. The tag is generally used to specify exponents such as m2 and ordinal numbers such as 1st, 2nd or 3rd.

How do you add sub text in HTML?

The tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O. Tip: Use the tag to define superscripted text.

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;
}

I used the following css:

font-size:70%;
vertical-align:super;

My Stack Overflow Answer<sup style="font-size: 70%;vertical-align: super;">©</sup>

HTML <sup> and <sub> not working

Tags:

html

Steve

People also ask

2 Answers

Daniel

itsmikem

Recent Activity

Donate For Us