Welcome to WebmasterWorld Guest from 54.161.130.145

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox and pre font-size

the font-size of pre in Firefox is extraordinarily small

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

Full Member

10+ Year Member

joined:Sept 25, 2003
posts:308
votes: 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>

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

Full Member

10+ Year Member

joined:Sept 25, 2003
posts:308
votes: 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.

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

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


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%.