Arial Font Displaying Weird in Firefox - Webmaster Forum - Web Design, Programming and SEO forums

03-28-2009, 02:03 PM

salsabrosa

Status: I'm new around here
Join date: Mar 2008
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

salsabrosa is on a distinguished road

Arial Font Displaying Weird in Firefox

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:

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:
http://drop.io/download/public/tvhef...98f/global.css

Here's the HTML:

Code:

<!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">
<head>
  <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>
</head>

<body>

<div id="container">
  <div id="header"> <a href="#"><img src="../../../public/images/logo.gif" alt="Logo" class="logo" /></a>
    <div id="signin">
      <ul>
        <li class="first"><a href="#">Sign In</a> |</li>
        <li><a href="#">Create an Account</a> |</li>
        <li><a href="#">FAQ</a></li>
      </ul>
      <form>
        <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>
      </form>
    </div>
  </div>
  <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>
      </ul>
    </div>
    
    
    <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>
        </ul>
    </div>

  </div>
  
  <div id="footer">
    <p> ©2009  All rights reserved.</p>
    <ul>
      <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>
    </ul>
  </div>
</div>

</body>
</html>

03-28-2009, 02:42 PM

salsabrosa

Status: I'm new around here
Join date: Mar 2008
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

salsabrosa is on a distinguished road

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!