Take the 2-minute tour ×

Possible Duplicate:
relative font-size of <sub> or <sup> and their descendants in IE

I'm usually well-versed in CSS but this issue surprised me...

I have some simple markup consisting of some text and a sub text:

<p>I am a main text<sub>This is a sub text</sub></p>

I have set the CSS so that by default, all elements get a font-size of 12px. However, for sub elements I am overruling this:

sub { color:#999; font-size:11px; }

Firefox respects the 11px, IE 8 does not, it renders it much smaller, but it does respect the color overrule. This is the last thing I would expect when setting a FIXED font size. I can assure that there are no other CSS rules conflicting with this.

If I increase the font-size in CSS to 12px, IE will render it at 11px, but then in Firefox it is too big. Something strange is going on with the SUB element in IE.

I do have a solution, if I use something else to mark the sub text, for example a h3, both Firefox and IE do render the font size correctly. If there is no better solution I will go for that direction, but I'm simply curious if there is a better solution? Also I like the way the markup currently looks.

share|improve this question
You are aware, aren't you that sub really means subscript? –  pavium Dec 11 '09 at 12:28
Yes. Your point being? –  Ferdy Dec 11 '09 at 12:29
Maybe IE objects to a font-size nearly the same as the body text. (IE has done stranger things) –  pavium Dec 11 '09 at 12:36
add comment

marked as duplicate by FelipeAls, rene, Andreas Köberle, martin clayton, jonsca Sep 3 '12 at 21:49


3 Answers

Can you replace that sub with a span?

share|improve this answer
add comment
up vote 0 down vote accepted

Since there does not seem to be a CSS fix I have settled on using the <small> tag instead of the <sub> tag. This works fine, although it does make my markup less clear.

share|improve this answer
add comment

The way I always worked around IE's non-standards-compliance was to check the user-agent and return a different stylesheet based on whether it was IE or otherwise. Then your IE stylesheet can do whatever it needs to in order to make IE render it correctly, without breaking it for everyone else.

share|improve this answer
So far I was able to avoid different stylesheets for different browsers and if possible I would like to keep it that way. –  Ferdy Dec 11 '09 at 12:30
In most instances, IE specific css can be made by using "* html sub". The "* html" part is specific only to IE, because it thinks there is one parent dom element outside of html, either the 'document' or 'window' element. Not sure which. –  Tor Valamo Dec 12 '09 at 19:30
* html sub hack works only for IE <= 6. Reliable, valid and non-script solution are truly the conditional comments. More here. –  Adam Jul 24 '11 at 17:20
add comment
