#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    3
    Rep Power
    0

    Going batty over Georgia font... Opera


    I used to be better at this, but never used to care how things looked in other browsers. Now I'm so confused about what I'm doing wrong that I've second-guessing every action I take, and can't make sense of something...

    I've got a very simple header-content-footer (footer is essentially header tacked onto bottom) that works more or less how I'd like, but when viewing in Opera 9.5 the Georgia font I'm asking looks utterly crap.

    Please have a look at Firefox 3 or IE 6+ for how I want it to look. It's essentially the standard <h1> font setting for most Wordpress templates.

    What am I doing wrong???

    site -- littlebee.gq.nu

    Thank you sincerely for your help. I'm regressing to extreme beginner here -- can't seem to get it to work even when creating a document focusing only on the body and text attributes...
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    I seem to be rusty with fonts. Can you point out which part is a georgia font? As far as I can see looks fine here. (Footer).
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    The h1 fonts are in Georgia, and they are a little 'fatter' in Opera. Is that what the problem is? I think each browser has its own way of displaying each font, and there's not much you can do about that. To tell you the truth, it looks fine to me. The headings have the same look in Safari as in Opera, by the way.
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Ah I see it now. Yes browsers interpret fonts differently, and quite honestly they all look pretty good so I wouldn't fuss over it . However in Opera 9.5, it shows the content being very thin. I would make it a tad wider.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    3
    Rep Power
    0
    Thanks sincerely for your help!

    I looked at the code for AListApart and those Wordpress templates using Georgia/Times and saw that the designs seem to display <h1> contents identically across all browsers, and wanted to replicate that with my own stuff, but if it's truly just a browser quirk (thank you also for checking with Safari!) then I can rest easy. It's been very frustrating not knowing WHY it does this for my <h1> but not for the professional folks. Guess I have to crack a few more books....

    Best regards!
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    When you use the shorthand property of font, values you omit would be reset to a initial value. As you haven't set any font-weight in your font shorthand property Firefox sets the value to normal.
    In the same time you got an error in your shorthand property so Safari and Opera correctly ignores the whole property.

    There shouldn't be a comma after the font-size 1.5em
    Code:
    font:1.5em, Georgia, "Times New Roman", serif;
    By removing that comma, Opera and Safari render the same as Firefox.

    http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
    http://archivist.incutio.com/viewlist/css-discuss/2332
    http://www.456bereastreet.com/archiv...nd_properties/

    Comments on this post

    • Kravvitz agrees
    • Arem agrees : Very helpful tip. Thanks!
    Last edited by Akh; July 28th, 2008 at 10:37 AM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    3
    Rep Power
    0
    Originally Posted by Akh
    When you use the shorthand property of font, values you omit would be reset to a initial value....

    There shouldn't be a comma after the font-size 1.5em

    By removing that comma, Opera and Safari render the same as Firefox.
    Akh, thank you thank you THANK YOU!

IMN logo majestic logo threadwatch logo seochat tools logo