CSShark - Netscape 4 Issues: Font Sizes & Inheritance
The CSS Know-How Site

CSS and Netscape 4.xx Issues

Font: Sizes and Inheritance

The only way to absolutely control the font size x-browser and x-platform is to put the text in a graphic. That is not the most elegant or efficient way to take advantage of the web. There is a very good article that shows the difference between print and web.

One of the better known issues with Netscape and CSS is the fact that NN 4.xx fails to properly inherit styles.

If you declare font-family and color in the BODY-tag*, IE and NN 6 will use this style in all elements like <table>, <div> and <p>. NN 4.xx will not.

Therefore you have to specifically explain to NN 4.xx what you expect it to render and how:

    body, div, p, blockquote, ol, ul, dl, li, dt, dd, td {
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
      color : #000088; 
      font-weight : 400; 
      font-size : 1em;}

Thanks to Jon Parkhurst I learned that IE also has a serious flaw with inheriting styles into tables. It seems that a font-size declaration in the BODY does not inherit into the TABLE, but the font-family declaration does.

Another NN 4.xx issue: If you declare {font-weight: normal;} on an element, descendant <b> and <strong> elements will not be bold, unless you explictly set {font-weight: bold;} or {font-weight: 900;} on them. This means, BODY {font-weight: normal} will suppress <b> and <strong>'s boldness; and this is the reason why it makes sense to set B, STRONG {font-weight: 900} to restore it.

 Back to the Top 

Netscape and IE render fonts in different sizes, and this is another reason for having two style sheets. NN renders usually a bit smaller, and you have to play with the different sizes. Adjacent font-sizes (e.g., 15 and 16px, 13 and 14px) are usually rendered as the same.

The progressive increase of scaleable font-sizes in NN4.xx:

You want to give your visitors the possibility to enlarge/minimize the font-size to their liking, and therefore you define your fontsize like:

p {
   font-size: 100%; /* slight emphasis */
}

You check in NN4.xx, and to your surprise you'll find the text grows progressively larger on the screen, especially if you use dynamically generated content.

Bob Swanson provided not only the description of this problem - he also found the solution at the Nu Pointers Bug web site: Putting whitespace around the offending tags fixes the "problem".

Instead of

<p>This is some text</p><p>This is more text</p>

you should take care to have whitespace separating the tags:

<p>This is some text</p> <p>This is more text</p>

Length units for fonts are:

1. pt is an absolute unit for font size as are centimeter, inch or pica. Absolute unit means that the font can not be scaled. All these units derive from media that allow total control over size, like print.
2. Relative units like ex and em or percentages are totally scaleable and allow the visitor to change the text size to whatever they want.
3. px = pixel guarantees you that a difference of 1 px will actually be visible, it is a relative length unit in the sense that it depends on the graphics' resolution, but it is not scaleable like ems or percentages. It depends on the resolution and is therefore also visitor-controllable, but with less impact on the page design.

Other topics:

•  Why use different styles for NN and IE - and how?
•  Background
•  Font: Sizes and Inheritance
•  Tables, Lists
•  Forms
•  Line Height, Margin, Border and
•  Miscellaneous