Accessibility

CSS Advisor

Keep consistent line spacing with sup and sub

by Brian Tapley on July 25, 2007
Edited by: mzaharia@adobe.com on January 4, 2013
Avg Rating 4.3 (13)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 7.0 , Safari 1.0 , Explorer for Mac , Safari 3 , Firefox 1.0 , Explorer 5.0 , Safari 2.0 , Opera 7.x , Position , vertical-align , line-spacing , Firefox 1.5 , Explorer 5.5 , Width/Height , Opera 8.5

Problem

Adding a <sup> or <sub> tag can throw off the line-spacing of a text block.

Solution

Use CSS to override the default browser style.

Detailed description

The selectors

<style type="text/css">
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;

}

sup {
bottom: 1ex;
}

sub {
top: .5ex;
}
</style>

Note that before version 7, IE treated vertical-align uniquely among other browsers. Using this approach, I need the underscore hack for IE 6 and below.

The markup

<sup>...</sup>
<sub>...</sub>

Before


After


before.gif
after.gif




Text ID: KEEP_CONSISTENT_LINE_SPACING_WITH_SUP_AND_SUB



Comments (9)

To add a comment, please Log in.




Nice!

Worked for me perfectly even in ExactTarget. Remember, if using styles in ET, include in between the body tags and not in between the head tags.

fixed!

Uhuh,

Found it, it *does* work.

I am going to add this to my reset styles from now on.

Thanks!

Bob

Still seeing the problem

the <sup> tag does indeed wreck my carefully crafted vertical baseline layout.
But the solution offered does not work for me, tested in several browsers.
As soon as I add the tag to the HTML, like so:

<p>Levi's<sup>&copy;</sup> </p>

my lines drop down beneath the baseline.


Site is here: http://www.productfotografie-fotograaf.nl/

Any idea how to solve this?
Tried changing the values of the CSS given but that does not seem to do anything.

Thanks

Worked great!

We just used this code to improve our site which has a lot of <sub> and <sup>s in our technical documents.

Eric Klien
Lifeboat Foundation

Worked quickly

Thanks - after reading about other complicated fixes, this was simple, and I am new at html - CSS is great

Thank you, it works

It worked, thanks Adobe

Superb Solution

A quick search on google and I found the solution. Great job!

seconded...

this was very helpful.

it works!

I found this via a search on google, and it helped me solve a problem I was having with some superscript text.  I figured the least I could do is say thanks.  So... thanks!





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)