Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Arial Font Displaying Weird in Firefox (Resolved)

    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>
    Last edited by salsabrosa; 03-28-2009 at 04:47 PM. Reason: Resolved

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    No such issue for me in FF2 or FF3 for the above given code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Great! Then please edit the title of your first post to read “resolved”.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by VIPStephan View Post
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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_f...t_element.html where it explains further down:
    Quote Originally Posted by http://www.seifi.org/css/css_shorthand_for_the_font_element.html
    • 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.

  • Users who have thanked VIPStephan for this post:

    abduraooft (03-29-2009)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •