Firefox bug in CSS (font) shorthand

I've been fighting this bug all day and finally got to the bottom of it. Thought I'd post it here in case it helps anyone...

When using font shorthand...

Code: Select all

font:bold 1em/1.2em georgia,"times new roman",serif;
or
font:italic 600 small-caps 1.2em/1.8em verdana, arial, helvetica, sans-serif;

if you include a line-height value, most of the other declarations will be ignored. As soon as I remove the line-height, it works fine.

I've tested this pretty thoroughly in FF 2.0.0.3 (and searched extensively for it on the web.) My searches didn't turned up anything. I'm surprised that no one else has encountered this. Maybe it used to work (prior to 2.0.0.3)? Anyway, hope this helps!

Does this work?

Code: Select all

font: italic small-caps bold 1.2em/1.8em verdana,arial,helvetica,sans-serif;

You're switched the correct order for the font-variant and font-weight. Also, I don't believe any browser supports the weight variants, so you might as well just use "bold" instead of 600.

With a lot of shorthand though the order can be switched around. You've just got to switch it around in the right way I guess.

Pete.

Things can be switched to an extent, but it's not CSS that allows this, it's the browsers. Sticking to the standards is the only way to ensure x-browser compatibility.

Code: Select all

background: url(image.jpg) top left no-repeat;

The above snippet caused problems in Safari 1. While it's wrong, it still seems to be the most popular arrangement of the values. Point in case, make sure the order is right! An extra 10 seconds to reference it could save a lot of hassle.

I've actually had the order right in some of my trials and it still didn't work. In fact, even this doesn't seem to work:

Code: Select all

font: bold 0.9em;

I know that should work, so I'm left wondering what the heck is going on. I think I've got some weird problem in my stylesheet.

I routinely test in FF2 and IE5.5 during development, then check everything with browsercam before publishing publicly. So far, I've not had any problems using weight values in either FF or IE. I haven't done a browsercam check yet, though, so I suppose it could all fall apart in Opera or Safari or Camino or something.

Some shorthand properties have values that are required at all times when using them and font is one of them

Efficient CSS with shorthand properties

What a terrible rule! Kind of defeats the whole purpose! In the majority of my pages, I use the exact same font family throughout and declare it in the body selector! No wonder I'm having so many problems! If I have to declare the family every time I use font shorthand, I'm not saving much in the way of code or keystrokes! I think I won't be bothering with font shorthand in the future!

Sorry, Karinne - please don't take that as shooting the messenger - I appreciate the help and the clarification, but I have to wonder what genius made that rule?!

I find it amusing that IE supports font shorthand even without the font family declaration. As much as IE gets bashed (and I do so as often as anyone), how ironic that their non-compliance turns out to be a superior method!

Well ... the thing is ... you should rarely use the font property. You should set it once in your body then when you change the site just use the font-size or to change the weight (boldness) use font-weight

Yup. That's what I'll do. It would just be nice, when I need to change more than one font property for a given element (which is fairly common), to be able to do it simply/quickly/easily with shorthand - without having to declare the font family.

What I mean by the font-weight thing is that font-weight: 500, 600, 700, 800 and 900 will produce the same thing as font-weight: bold; and font-weight: 100, 200, 300 and 400 will produce the same thing as font-weight: normal;