Wrong Rendering of <Sup> in Table with Valign=Top in Chrome and Safari

Wrong rendering of sup in table with valign=top in Chrome and Safari

Avoid using the sup element, since it causes various problems and never really produces a typographically correct superscript.

If you only need superscript 2 in your document, just use the SUPERSCRIPT TWO character either as such, “²”, or using the entity reference ². This means using a text character designed by a typographer to suit the font design.

If you need superscripts of various kinds and cannot represent all of them as superscript characters, it is better to use span elements and styling that reduces font size and raises the characters – using relative positioning rather than vertical-align (which tends to cause uneven line spacing and may sometimes interfere with vertical alignment set elsewhere). Example:

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}

Correcting Webkit Vertical Alignment Issue with sup and CSS vertical-align:top on TD

I had the same problem and decided to use relative positioning;

Wrong rendering of <sup> in table with valign=top in Chrome and Safari

Why is vertical-align: middle not working on my span or div?

Using CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
}

use "justify-content: center;" to align elements horizontally

Note: This might not work in old IE's

UTF8 Bug in Chrome and Safari? Or wrong Apache setup?

Okay I sorted it out. Apparently, the characters weren't correct UTF8. Now I copy/pasted some special characters from charmap (selected arial as font) and now it works.

Why is my CSS tool tip not functioning properly in Google Chrome, but fine in Firefox?

OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.

Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.

In the end I changed the p's to span elements and all is well across browsers.

HTML sup / tag affecting line height, how to make it consistent?

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.

---

Related Topics