homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Firefox and pre font-size
the font-size of pre in Firefox is extraordinarily small

10+ Year Member

Msg#: 3194967 posted 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">
<style type="text/css">
body { font-family: Verdana; font-size: 85%; }
pre { font-size: 1.15em; }

<p>Hello World</p>
<pre>Hello World</pre>




10+ Year Member

Msg#: 3194967 posted 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.


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

Msg#: 3194967 posted 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%.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved