Firefox and pre font-size

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox and pre font-size

the font-size of pre in Firefox is extraordinarily small

chadmg

7:49 pm on Dec 20, 2006 (gmt 0)

Anybody know how to fix the font-size of pre in Firefox? If you specify font-size as either a percentage of less than 80% or ems less than .8em, the pre tag will appear very small.

Try viewing the below code in Firefox, Opera, and Internet Explorer. You will see that Firefox shows the pre much smaller than the other two. Is this a Firefox bug? Is there any way around this using straight up CSS, i.e. no hacks or browser detection? Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { font-family: Verdana; font-size: 85%; }
pre { font-size: 1.15em; }
</style>
</head>
<body><p>Hello World</p>
<pre>Hello World</pre></body>
</html>

chadmg

7:52 pm on Dec 20, 2006 (gmt 0)

Very strange. When doing a preview of my message on this site, everything specified as [ code ] appeared very small. Then when it actually posted it was a good size.

Update: I figured it out. As a preview, the code is displayed using the <code> tag. When posted, there is a <font> tag around the <code> tag increasing the size.

I'm still looking for a CSS solution to the the problem.

Fotiman

8:53 pm on Dec 20, 2006 (gmt 0)

You could use the Yahoo UI Library's Font package to get cross browser normalization of fonts. Or you can just copy the relavent style rule to your own code:

pre, code {font:115% monospace;*font-size:100%;}

This should make the pre and code fonts the same size as your regular text, while keeping IE at 100%.