January 03, 2008

CSS weasels rip my flesh

Having just stumbled across the crazy-handsome I Love Typography, and having just talked about The Elements of Typographic Style being applied to the web, I have to slap my forehead–again–at my inability to get this blog to look consistent across browsers.  You might think that after 14 years of development, Web browsers would have made all this a non-issue.  You’d be wrong.

I’m specifically irked that I can’t get Firefox to display the titles of posts at anything approximating the correct size.  Check out how they look in Firefox vs. in Safari & Internet Explorer.  Typically it’s IE that gets taken to the woodshed for its standards-compliance, but in this case Firefox is the odd man out.  (Tell me, though, that both Windows browsers’ failure in 2008 to anti-alias the text is just an artifact of my running Vista on a Mac.  Please…?)

I’ve been using Cultured Code’s beautiful little Xylescope app to inspect my pages & tweak the CSS values.  Safari & IE respond obediently when I tweak the size of h3.title; Firefox, eh, no response.  And it’s obviously possible to get Firefox to honor font sizes; the author name on this page, for example, renders the same in Safari & Firefox.

I also failed to understand why the appearance of the comments area would differ between Safari and Firefox (the latter showing the text much larger).  Now that I’ve updated to Safari 3, though, I see that it displays the text as Firefox does.

I spent the early part of my career wrestling with browser incompatibilities, so I know this kind of thing shouldn’t surprise me.  I guess I just figured that, all these years later, something so simple should be a no-brainer.

Tangentially related: Man Against Weasel.

[Update: Thanks to Mark and Fredrik and their super quick & accurate suggestions, I’ve been able to nix the FF rendering problem. Viva the wisdom of crowds.]

Posted by John Nack at 3:38 PM on January 03, 2008

Comments

  • Mark Reeder — 4:06 PM on January 03, 2008

    The problem with your h3.titles is the font tag that shows up within the h3 (there are a bunch scattered throughout your markup.
    You can fix the problem by either removing the font tags (or at least the size=”-1″) or by adding the font to the selector:
    change: #blog h3.title
    to: #blog h3.title, #blog h3.title font
    [Ah, thanks for the quick suggestion; trying it now… –J.]
    [Update: You’re the man, and I now feel a little silly. But hey, at least I got to plug Xylescope & retro weasle flesh-ripping, so I hope the post wasn’t a complete waste of your time. :-) –J.]

  • Fredrik — 4:15 PM on January 03, 2008

    Hmm I see font size=-1 in the code, that is not good, might just be the problem?
    [Indeed it was; thanks for the quick assist. –J.]

  • Boris Yankov — 4:52 PM on January 03, 2008

    By ‘both Windows browsers’ failure in 2008 to anti-alias the text is just an artifact of my running Vista on a Mac’ you probably mean that you are already too familiar with the blurred anti-aliasing the Mac has, and are very surprised to see ClearType text looking so good like a high resolution text, not as an out of focus picture? :)

  • jimhere — 6:18 PM on January 03, 2008

    Thanks for the Xylescope tip.
    I also use “Xray”
    http://westciv.com/xray/index.html
    as a way to easily dissect pages from within Safari (I put it as a button in the bookmarks bar).
    Xylescope seems good for more in depth surgery though…

  • Steve Laskevitch — 9:02 PM on January 03, 2008

    Hey John,
    I’ve fought over that size issue until I found a solution:
    body { font-size: 95.01%; } at the top.
    then all other sizes made relative to that:
    h1 { font-size: 150% }, e.g.
    Like magic, IE/win 6 & 7, Firefox win & mac, safari win & mac, all show type almost identically (at least compared to what I was used to!)
    It’s also really easy to adjust all sizes at once by adjusting the body rule.

  • Michael Gaylord — 1:01 AM on January 04, 2008

    For an explanation on why fonts are rendered differently on Windows and OSX check Joel On Software’s explanation:
    http://www.joelonsoftware.com/items/2007/06/12.html
    [Cool, thanks. –J.]

  • Danny C. — 8:52 AM on January 04, 2008

    Thanks for the Frank Zappa reference. We can never have too many of those!
    Thanks also for all the hard work you put into this excellent blog, especially taking all the flak from the guys with the tin hats. I’ll bet Adobe doesn’t pay you for that!

  • imajes — 6:58 PM on January 04, 2008

    I thought I’d let you know that your blog’s always looked fine in Opera.
    Never understood the fuss about Firefox. Using Firefox after using Opera is like using OS8 after using Leopard. All the fancy ‘new’ features that FF tends to brag abouth are usually something Opera users have used for many years.

  • Domi — 6:30 AM on January 05, 2008

    As a general rule wrt the font issue, I have had great success applying the YUI reset-fonts-base combo (and grids, too, FWIW.) Then you have some percentage values that will look the same everywhere. You do have to watch for the nesting of elements that each carry percentages, but that kinda forces you to build good, simple markup anyway.

  • Ivar — 1:11 AM on January 13, 2008

    Hey Boris,
    We are desperate looking for you on your own FusionDesk forum!!!

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)