Line height and superscript

**xalres** · 17 November 2005, 04:15 AM

I was wondering if any of the HTML/CSS gurus that frequent this board know how to get rid of the "push" caused by using the tag. I'm making a site that uses a lot of ®'s and ™'s. They want them to be in superscript but they push the preceding line up.

Is there a way to use CSS to get rid of this? I've already tried using line-height and position:relative, the former has no effect, the latter moves the character but keeps the upper margin, margin-top also has no effect.

Any help would be greatly appreciated.

**InTheZone** · 17 November 2005, 11:56 AM

There's a couple of things you can try...

Set the document as XHTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

You can also put the following character set meta tag in the head of your document...

Code:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Then just put your ®'s and ™'s without wrapping them in a superscript tag.

Hope that helps.

**xalres** · 17 November 2005, 03:16 PM

Alas, neither of those worked. They got rid of the line push but no superscript. I did find a way to use CSS to emulate and it works great. Set up a style like so:

Code:

 
<style>
 
P
{
font-family:Verdana;
font-size:12px;
}
.sup
{
position:relative;
top:-3px;
font-size:10px;
}
 
</style>

Then when you need to do a superscript use this instead of :

Code:

Company McCompanington<span class="sup">&reg;</span>

Works like a charm. Looks like I have some find/replacing to do.

**LonK** · 17 November 2005, 03:49 PM

Rather than using a class selector, simply set the styles on the tag:

sup
{
position:relative;
top:-3px;
font-size:10px;
}

That way you'll not have to replace existing tags with markup:

Company McCompanington®

**xalres** · 17 November 2005, 04:04 PM

That brings back the original problem. Something about how the tag is rendered makes the line it's on a little taller and I haven't found a way to override that behavior while still using that tag.

**sallybode** · 17 November 2005, 05:27 PM

It also has to do with the font and how it becomes a superscript, you can reduce font size just on the superscript part and restore to the correct font size when you are done with it.

These are cosmetic fixes, I don't think there is a HTML fix.

**LonK** · 18 November 2005, 04:54 PM

True what Sally says. Another thing you can try is to adjust the line-height so it greater than the default for the paragraph text -- which is usually a bit tight IMHO. Try a factor of 1.4 to 1.8:

p {font:12px/1.6 verdana,arial,sans-serif;}

Should solve you prob AND be easier to read to boot!

Thread: Line height and superscript

Thread Tools

Display

Line height and superscript

Re: Line height and superscript

Re: Line height and superscript

Re: Line height and superscript

Re: Line height and superscript

Re: Line height and superscript

Re: Line height and superscript

Bookmarks

Bookmarks

Posting Permissions