Text is readable in Chrome; microscopic in Firefox

I have some text on a page that is small but readable in Chrome/Safari (that's how I intend it to be), but becomes microscopic in Firefox for some reason. Can anyone suggest a fix so that the text is readable in Firefox and IE?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <title>WTF LBJ?!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">

#credit {font-family: "helvetica"; font-size: 20%; color: black; text-align:center; }

</style>

<body>

    <div id="credit"; >
        Created by <a href="http://www.twitter.com/varunsshetty">Varun Shetty</a> and <a href="http://www.twitter.com/bcfromblo">Bobby Corp</a>. Inspired by LBJ and <a href="http://www.whatthefuckhasobamadonesofar.com">WTF Obama</a>. Bobby loves Lebron; Varun loves the idea of Lebron.<br>
        Sorry for the swear word, but LBJ gets people fired up.
    </div>

</body>

</html>

Answers


20% is equal to 0.2em, or 1/5 of the font size. My guess is that Chrome / Safari have a minimum font size configured to keep this readable. Try adjusting the font-size to something higher, like 0.4em and see if it actually becomes bigger in Chrome / Safari. If it doesn't, you've just hit a browser-defined minimum and the "real" font size is actually smaller.

Example


try and set font-size to a specific number instead of %, like 8pt or 10px


I'm wondering if it is because you are using a low percentage on the particular font. By default, most browsers display fonts relative to 16px. So, when you defined #credit {font-size: 20%;}, you were telling the browser, "I want 20% of 16px, or a size of around 3.2px." Here's a possible solution...

When I go about building websites, I always first set a default font size on my body tag. I have read several places on the web, (incl. Chris Coyier's popular CSS-tricks blog) that if you set body {font-size: 62.5%;}, this will actually help in making fonts similar in size between varying browsers.

Setting a font-size in pixels is ok if you're targeting screen devices (as it appears some have already suggested), although I'm starting to become a fan of ems as they seem pretty powerful. Ems are good in the sense that they are always relative to the parent (in this example, your body text). If you set font-sizes on your other page elements in ems based off of your body font-size, which is 62.5% (translated = ~16px), then you're golden. You're providing your users with the most flexibility and you're also supporting IE browsers to zoom in and out without degrading the fonts...always helpful for users who might need to zoom in a bit to read something or zoom out a bit to see the whole page.

By using this method of ems and setting a default body font-size, everything in ems can be almost literally converted. So, for example, if you want some text to be 10px in size, just set your font-size to 1.0em. If you want a font-size of 22px, set your font-size to 2.2em...12px = 1.2em, 72px = 7.2em, etc.

In short, try setting your body {font-size: 62.5%;} and then setting #credit {font-size: 0.8em;}. This should give you a similar font-size between browser windows of 8px. Adjust accordingly if you would like something smaller or a little larger.

The even simpler answer would be to just use pixels like others have suggested, but like I said, create your sites with your users in mind. :)

Hope that helps!


Need Your Help

Getting SQLite data into UIWebView

iphone ipad sqlite xcode4 uiwebview

I'm modifying a SDK tutorial that pulled from a very basic SQLite DB and displayed the data from one field in an UIImageView, and description in an UITextView.

spray.io debugging directives

scala spray spray-dsl

I am playing around with spray.io and I am not able to make spray debugging directives logRequestResponse work - I don't see any output in the log.