line height colliding with <sup>

In certain browsers only, of course

[louponne]

I have css styles thus:

.mytext {font: 11px/15px Verdana, Arial, Helvetica, sans-serif;}
sup {font-size: smaller;}

And text on my site thus:

...<td class="mytext">loreum stuff^&reg; and more ext</td>...

On all the browsers I have, it works neatly. But someone just sent me a screenshot of it looking nasty. The superscripted ® seems to have pushed the line it's in down, so it pushes up against the line below.

Any solution to this little bug?

[iamlost]

Which browser version is the problem?

[pageoneresults]

I've done something like this that works fine. But I haven't seen a screen shot from your friends browser either. ;)

sup{font-size:10px;vertical-align:top;}

Make the sup a fixed font size and the problem should go away. Whats happening is the user has a different screen resolution and probably has their font size up one notch beyond the one you've designed at. Assigning an absolute size to that <sup> will prevent that from happening. In IE that is. Other browsers like Opera and Mozilla allow text resizing when using absolute font sizes.

You could maybe do something like this too...

sup{font-variant:small-caps;vertical-align:top;}

The small-caps will force the sup to be smaller than the rest of the text.

P.S. The vertical-align:top; will force the sup to the top of the line and could possibly cause issues with the line above. You've just got to experiment with absolute sizing to get it just right.

[louponne]

Which browser version is the problem?

Well, it seems to be a version of IE6 on a PC - but I've looked at several IE6 installations, and don't see the problem. :-(

sup{font-size:10px;vertical-align:top;}

I can't do that, because I have <sup> in a whole bunch of places, where the text is different sizes.

sup{font-variant:small-caps;vertical-align:top;}

The small-caps will force the sup to be smaller than the rest of the text.

But shouldn't my {font-size: smaller;} do the same?

P.S. The vertical-align:top; will force the sup to the top of the line and could possibly cause issues with the line above. You've just got to experiment with absolute sizing to get it just right.

Problem is, this glitch is only showing on one of my client's machines - I can't see it myself!

[SuzyUK]

Hi louponne

This isn't a bug, but it is a can of worms ;)

I won't bore you with line boxes, inline boxes and content area stuff but if you (or anyone else) wants to make make head or tail of this article [meyerweb.com] then the answer is there.. (it's not for the faint hearted!)

But here try this solution from what I managed to glean:
(btw, I never like to use keywords for font-sizes as they can be unpredictable in themselves)

sup {font-size: 80%; line-height: 80%;}

and adjust the percentage to suit...

Note: the calculations for ascenders/descenders in line height are font family dependant so I went on the basis of reducing both the font and the line height by the same amount.

Suzy

[louponne]

<gulp> thanks for the reading matter, it'll be great for when my brain is running on hydrogen ;-)

I'll give your proposed css a try - thanks!

[louponne]

Yes,

sup {font-size: 80%; line-height: 80%;}

Does solve the problem on the nasty browser - many thanks again!