Line height and superscript
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 <sup> 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.
Re: Line height and superscript
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.
Re: Line height and superscript
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 <sup>:
Code:
Company McCompanington<span class="sup">®</span>
Works like a charm. Looks like I have some find/replacing to do.
Re: Line height and superscript
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 <sup> tags with <span> markup:
Company McCompanington<sup>®</sup>
Re: Line height and superscript
That brings back the original problem. Something about how the <sup> 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.
Re: Line height and superscript
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.
Re: Line height and superscript
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!
