On Tuesday the Mozilla Corporation decided to set a world-record for number of downloads in a day for their new Firefox 3 web browser.
Even though I love Opera and would never, ever part from it, I decided I would do my part and download Firefox 3, to help Mozilla set their record.
Of course, Firefox couldn’t have predicted that their PR scheme would result in a self-inflicted DDoS attack on their servers. 😆
I installed Firefox 3, to keep it around as a back-up browser. (Some websites will work only in IE or Firefox. Opera and Safari users, we might as well be lepers.)
And then I discovered that my website was unreadable.
I surfed the ‘net. I discovered that about half the websites I visited were unreadable. Fonts were rendered very small for some reason.
I think it’s a bug in the Gecko 1.9 engine that Firefox 3 uses.
Through trial and error I discovered that this line of code —
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
in my stylesheet I had to turn into this —
font-family: Verdana, Tahoma, arial, sans-serif;
and then everything was fine.
Strangely enough, it worked fine as is in Firefox 2.x, Safari, Internet Explorer, and Opera, but in Firefox 3, it broke.
And now we’re good to go. 🙂
But you know what I miss when I look at the website in Firefox? The text shadow effects on titles. I guess text-shadow is one CSS3 selector that hasn’t made it into Firefox yet, even though it’s in Opera 9.5 and Safari 3. *shrug*
ETA: You know what? Scratch all that. I had to undo the change I made to style.css, because even though it made things readable in FF3, everything became giant in other browsers.
This requires more research.
ETA(2): Research turns up that Firefox 3 handles em measurements oddly. So, the line
was changed to
And now everything is legible.
ETA(3): Nope. The problem was on my end. I think.
2 thoughts on “On Firefox Follies”
70%/1.5em is an extremely odd way to render font size. I’m not a CSS expert by any means but in tweaking and messing around with CSS for WordPress themes I’ve downloaded, I’ve never seen something like that.
Great to hear you found a fix. I was on your site recently to comment through Firefox 3 beta and didn’t have this problem.
It is an odd way to render font size. The thing is, I’ve seen it elsewhere, only I don’t remember why it’s done that way. I think it’s some sort of IE hack or something.
What it’s meant to be, from experimentation, is .70em. Or 11.2pt. (Which was pretty close to what I’d come up with just from eyeballing it.)
However, it’s not a bug. Not a problem with Firefox. Somehow, my base font size got munged up, and that made all the difference. Firefox was doing what it was supposed to do, but from a bad starting point. :-/