CSS font-size property not working in Internet Explorer

CSS (Cascading Style Sheete) font-size property does not work properly in Internet Explorer (IE) if spcified in this way,

font-size: small

or

font-size: medium

In mozilla firefox, it works fine.

Workaround:

Use em to specify the font size e.g.,

<style  type="text/css">
body {font-size: 0.75em;}
</style>

Inheritance can cause problems, for nested tags, when em or % sizing of the text is used. For example, if you create a style like

ul {font-size: 75%;}

then a nested list (another ul tag inside ancestor ul) is set to 75% of 75%, making the text in the inner ul smaller than the rest of the list text.

Workaround for this is, create an additional descendent selector style

ul ul {font-size:100%;}

and put it after the earlier style. Hence there would two styles (or may be more as per the nesting),

ul {font-size:75%;}
ul ul {font-size:100%;}

IE6 and earlier sometimes have problems displaying text when ony em units are used. To cope with this, there are two ways,

1) Either stick with percentage values like

font-size: 100%;}

or

2) Set the font size for the body of the page to percentage and then use em to size other text.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>