|
CSS Tip:
Cross-Browser Font-Size
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Since 80% of Web surfers are now using a 4th generation browser, Cascading Style Sheets are becoming a commonplace feature of HTML. Here's a tip that can save you some frustration when working with CSS: be careful where you put white space within a style rule. White space can cause problems if the value of your style property is specified as a unit of length.
For example, suppose you want to create a style rule that makes a block of text 24 points high. To do this, you might use the following style rule:
<DIV ALIGN="center"
STYLE="font-size : 24 pt; color : red">
This is 24 pt text, right?
</DIV>
|
This renders the following text:
This is 24 pt text, right?
According to the CSS Specification, this isn't a legal rule. The standards don't allow for a space between the number and the unit. So "24pt" is legal syntax, but "24 pt" is not.
However, the two major browsers apply this rule differently. Netscape Navigator strictly applies the standard, and so ignores the rule. In addition, this syntax error prevents Navigator from correctly parsing the "color : red" rule as well. As a result any Netscape browser will display the code above as normal text.
Microsoft Internet Explorer does allow for a space between the number and the unit. If you're using Internet Explorer 3.0 or higher, you should see this text rendered in large red letters.
Who is correct here? Since the standards state that the number and the unit of measure cannot contain white space, Internet Explorer is allowing an illegal syntax. Keep that in mind if you build your Web pages using Internet Explorer. Style sheets that work under that browser may not work under Navigator.
If we re-write the style rule as follows, both browsers will display the text as intended:
<DIV ALIGN="center"
STYLE="font-size : 24pt; color : red">
This is 24 pt text, right?
</DIV>
|
This renders the following text:
This is 24 pt text, right?
Also note that Navigator's handling of this extra white space is quirky. In the case above, Navigator ignored the entire style rule. For other style properties, though, the result is a partial or erratic display of the style.
In any case, you should be able to avoid trouble in all browsers if you write your length values without white space.
|
