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.]