Using font keywords xx-small to xx-large

Forum Moderators: not2easy

Message Too Old, No Replies

Using font keywords xx-small to xx-large

Don't appear the same in IE6 and Firefox 0.9.3

dive into perl

5:24 pm on Sep 2, 2004 (gmt 0)

Instead of using px, ems etcetera, I would like to use the font keywords xx-small through xx-large to style a page.

What I understood to be a standards way of implementing the CSS, the visual results appear to be totally different in IE6 and Firefox 0.9.3

For example using the sample code below, the text looks much bigger in IE6


<html>
<head>
<style>
p {
 font-family: Arial;
 font-size: small;
}
</style>
</head>
<body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></body>
</html>

Does anybody else use the font keywords to style their text? and if so do you have the same problem and does anybody have any advice on how to use them so that they render the same in all modern browsers.

Thanks in advance.

Paul,

Khemikal

5:26 pm on Sep 2, 2004 (gmt 0)

If need be, you can use the star selector hack to set your size for firefox/moz to one size higher than IE...thats what I do. Example:

#content {font: normal 80% arial, sans-serif;}
* html #content {font: normal 70% arial, sans-serif;}

firefox/moz will see the first version and IE will see the second.

Khem

Khemikal

5:28 pm on Sep 2, 2004 (gmt 0)

I just noticed that you were apparently targeting a specific paragraph? If so you could also:

#content p {font: normal 80% arial, sans-serif;}
* html #content p {font: normal 70% arial sans-serif;}

Only applied to your <p></p> then.

Khem

dive into perl

6:20 pm on Sep 2, 2004 (gmt 0)

Thanks for your response Khem, it actually turned out that I needed to add a valid document type to the top of the file.

The code below now renders the same in both browsers, so I think keywords are the way to go for me.

I was surprised that not including the doctype created such a difference, oh well you learn something new every day :-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<style> 
p { 
font-family: Arial; 
font-size: small; 
} 
</style> 
</head> 
<body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </body> 
</html>