About a month ago I finally got around to playing with sIFR for a project I was working on. For those of you unfamiliar with the term, sIFR is a method of rendering text with Flash through the use of javascript, jointly developed by Shaun Inman (the “i” in sIFR) and Mike Davidson. It is essentially a workaround for the limitation of fonts that can be used on the web without having to create images for everything.
The tutorials were all fairly easy to follow and I ran into only minor problems on getting everything setup. But when it came time to getting the fonts to size correctly, sIFR was not going my way. IE seemed to be dealing with it okay, but Firefox wasn’t complying.
The Problem
I tried adjusting my font-sizes, and for some reason it only worked if the font-size was way bigger than it should’ve been. For example, if it was supposed to render as 25px, I had to specify it to be something like 40px to render the way I wanted it to. Something just wasn’t right.
This was beginning to frustrate me, and as anyone who’s programmed at one point or another knows, it can become really disheartening. Everything looked right on my end, and it started to look as if I’d been foiled by Shaun Inman once again. Now don’t get me wrong, Shaun Inman’s a genius and highly admired by all of us web developer nerds, but blast it! (In angry boss voice, shaking fist at the air) Inmaaaaaaaan!
Finally, I started stripping everything out of my stylesheet, and of course, found my problem.
The CSS Ninja Discovers the Weak Point
The cause was my habit of setting all my basic font-styles in the body, like so:
body {
font-family: Georgia, Times, Serif;
font-size: 11px;
line-height: 18px;
color: #000;
background: #f5f7f4 url(../../_images/bg.gif) repeat-x top;
}It turns out that because my sIFR-targeted h2 and h3 tags were inheriting the line-height, sIFR didn’t like that and was translating it to the block height. My solution was simple:
The Solution
.sIFR-hasFlash h2 {
line-height: normal;
}
.sIFR-hasFlash h3 {
line-height: normal;
}
A feeling of triumph swept over me at the resolution of this bug, the same feeling I got everytime I displayed my greatness at my HTML sorcery.
Eric Lim: 1; Shaun Inman: 0. We’ll just ignore the fact that he created sIFR in the first place. Cause I said so.
Addendum
After googling my problem, it seems that sIFR 3 acknowledges the line-height issue and makes it the default sizing method, and a comment in a thread about sIFR 2.0 RC4 mentions the issue as well. Guess I missed it in my googling.
Syndicate this site
comments
CSS Ninja….I can see it now: Eric discreetly perusing code to eradicate the world of invalid CSS in full Ninja garb.
Credit (and fist shaking) where credit is due. While IFR was pioneered by myself and greatly advocated by Mike Davidson, sIFR is primarily the result of the JavaScript prowess of Mark Wuben. So the title of this article should really be Eric Lim: 1; Mark Wubben: 1; Shaun Inman: who?
Haha, thanks for that clarification, Shaun. But sIFR’s got your last name in it and it was so much easier to direct the frustration your way.
Jorge - great PDF Master, your Kung Fu is weak against my CSS Ninja skills.
**ducks**
Thanks for figuring this out. Perhaps you could add it to the wiki?
[…] It’s a bit humbling though, and kinda funny when I think everyone’s gonna come and see me trying to pick a fight with Shaun Inman and making fun of Jorge’s PDF Portfolio. Talk about getting caught off guard. […]