Menu
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.
901
sup() Deprecated: This feature is no longer recommended.
The HTML <sup> element is found within the <body> tag. The <sup> tag is used to comply with typographical standards or conventions. The <sup> tag is generally used to specify exponents such as m2 and ordinal numbers such as 1st, 2nd or 3rd.
The <sub> 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 <sup> 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
