View Full Version : Arial Font Displaying Weird in Firefox (Resolved)

03-28-2009, 04:07 PM
This is the first time I run into this. Only in a certain sections of the page, Arial appears pixelated. So odd! Anyone else run into this before?

Here's a screenshot:
http://img8.imageshack.us/img8/594/screenshotqzr.th.jpg (http://img8.imageshack.us/my.php?image=screenshotqzr.jpg)

I thought it could be due to the SIFR I have set up for the headings, but even when I remove the SIFR files from the head, it still looks the same.

Here's the CSS:

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Name</title>
<link rel="shortcut icon" href="favicon.ico" />
<link href="../../../public/stylesheets/global.css" rel="stylesheet" type="text/css" />
<link href="../../../public/stylesheets/ie6.css" rel="stylesheet" type="text/css" />
<link href="../../../public/stylesheets/sifr.css" rel="stylesheet" type="text/css" />
<script src="../../../public/javascripts/sifr.js" type="text/javascript"></script>
<script src="../../../public/javascripts/sifr-config.js" type="text/javascript"></script>


<div id="container">
<div id="header"> <a href="#"><img src="../../../public/images/logo.gif" alt="Logo" class="logo" /></a>
<div id="signin">
<li class="first"><a href="#">Sign In</a> |</li>
<li><a href="#">Create an Account</a> |</li>
<li><a href="#">FAQ</a></li>
<input class="searchbox" name="" type="text" value="Search Tags or Questions" onfocus="this.value=''" onblur="this.value='Search Tags or Questions'" />
<button type="submit">Go</button>
<br />
<a href="#">browse tags</a> &nbsp;|&nbsp; <a class="browse" href="#">browse questions</a>
<div id="body">
<div id="navcontainer">
<ul id="nav">
<li id="nhome"><a href="#">Home</a></li>
<li id="nask" ><a href="#">Ask a Question</a></li>
<li id="nmycity" class="on"><a href="#">My City</a></li>
<li id="nblog"><a href="#">Blog</a></li>

<div id="section" class="mycity">
<h1>My City </h1><h3 id="location">Hollywood, FL, United States <br /><a href="#">Edit My City</a></h3>
<p>These questions are rated by people who live in the same community as you! Use this area to search for topics related to your location and see comments from only those that live in your community. Cool!</p>
<span class="hr"></span>
<p class="filter"><b>Filter:</b> <a href="#">Show All</a> | <a href="#">Show hidden</a></p>

<ul class="question">
<li class="question-link"><a href="#">How would you rate your community’s environmental noise levels?</a></li>
<li class="question-actions"><a href="#" class="hide">Hide this question</a> | <a href="#" class="flag">Flag as Inappropriate</a></li>
<li class="question-info">February 10, 2009, Submitted By: <a href="#">Princess_Lory</a></li>
<li><a href="#" class="comments">5 Comments</a> Average Rating: <img src="../../../public/images/icon_rating_4-0.gif" /></li>


<div id="footer">
<p> ©2009 All rights reserved.</p>
<li class="first"><a href="#">About Us</a>|</li>
<li><a href="#">Terms &amp; Conditions</a>|</li>
<li><a href="#">Contact Us</a>|</li>
<li><a href="#">Blog</a>|</li>
<li><a href="#">RSS Feeds</a></li>


03-28-2009, 04:15 PM
No such issue for me in FF2 or FF3 for the above given code.

03-28-2009, 04:26 PM
Really? Could it be a browser plug-in I have installed?...hmmm. Well your response is a big hint...thank you for trying the code out.

I'll let you know if disabling the add-ons makes the font look correct.

03-28-2009, 04:41 PM
I figured it out. I had my font size and font-weight inverted in my short-hand font attributes:

body {background: #bbbe8f url(../images/bg_body.jpg) repeat-x center 0; font:100% normal Arial, Helvetica, sans-serif; color:#3e3e3e; }

I swapped those around and my fonts are back to normal now! man...such a tiny little mistake can cause so many headaches!

03-28-2009, 05:22 PM
Great! Then please edit the title of your first post to read “resolved”.

03-28-2009, 06:10 PM
Great! Then please edit the title of your first post to read “resolved”.

Hello Stephan, do you know any details of that bug? Does that order really matter?

03-28-2009, 08:39 PM
I have no idea why it would be displayed pixelated if the order isn’t correct but the order does indeed matter. A quick search brought up this site at http://seifi.org/css/css_shorthand_for_the_font_element.html where it explains further down:

Order of the properties matters.
The correct order is font:font-style | font-variant | font-weight | font-size | line-height | font-family
All modern browsers fully support CSS shorthand.
Both the font-size and the font-family are required.
The font-family must always be at the very end.
The font-size must come before the font-family.
The font-style, font-variant or font-weight commands are optional and will be defaulted to the value “normal” if left out.