Today I got a nice surprise at work this morning. One of my teammates got the FireFox 9.0.1 (Windows) update pushed to them yesterday and it broke an internal mediawiki site. Thinking this must be a bug in the CSS of our mediawiki skin I dove into explore the issue. This is not my CSS code so I was naturally suspicious and couldn't wait to rub it in to another colleague (author of said CSS) when I found his hideously stupid bug....
Unfortunately I didn't get the opportunity to do a little chiding, because the problem, it turns out, is with the CSS parser in the FireFox 9.0.1 update. The CSS parser in FireFox 9.0.1 doesn't handle the
font stack correctly.
Honestly that's being far too generous. This bug breaks font attributes in CSS, okay not all font attributes in CSS just the ones you want to override. It does NOT allow overriding of previous settings at ALL in the font attributes.UPDATE: There was a helpful soul on the forum that gave me a gentle shove towards the CSS documentation found
here and it illuminated the bug in the CSS below. While it worked in previous versions of FireFox, it probably shouldn't have. I've preserved the original example for others to see the issue. I've made the example a little more copy & paste friendly.
Take this
BUGGY example:
<style>
#p-wrapper p {
font-family: arial;
font-size: 125%;
}
#p-inner p {
font-size: 95%;
}
</style>
<div class="p-wrapper"><p>Some Wrapper Text</p>
<div class="p-inner"><p>Some inner text</p></div>
</div>
What
supposed used to happen with the above snippet is that the font-size would change from 125% when in the p-wrapper class(
can you spot the bug yet?), unless you happen to be in the p-inner class(
there's that word again) in which case the font-size should change to 95%. In FireFox 9.0.1 this does not happen. Instead the first value for font-size wins. There's no cascading at all.
It really makes the CSS engine in FireFox 9.0.1 look more like SS. And that is to be expected. That code has a bug. The # at the beginning of p-wrapper and p-inner define an
id selector. What I need is a
class selector. FireFox 9.0 became strict in this respect and now you must actually write VALID CSS(
what a concept) like the following:
<style>
.p-wrapper p {
font-family: arial;
font-size: 125%;
}
.p-inner p {
font-size: 95%;
}
</style>
<div class="p-wrapper"><p>Some Wrapper Text</p>
<div class="p-inner"><p>Some inner text</p></div>
</div>
There is still a CSS
bug in FireFox 9, but it does not appear to be mine. My bug appears to be non-standard and almost flatly invalid CSS. The good thing to come out of this episode is that I now get to harass the colleague for the sloppy code.
YAY!!! However, now I have to fix up the CSS in the mediawiki skin....
BOO!!!If you find any mistakes or errors in this post please drop a note.
Happy Hacking!!
