Why do newlines in my CSS font-family break IE? How can I avoid this?

Question

My designer wanted Century Gothic, which is not quite web safe, so we decided lucida was an OK backup and I wrote a long stack of fallback fonts:

body {
font-family: "Century Gothic",
             "URW Gothic L",
             "Apple Gothic",
             "Lucida Grande",
             "Lucida Sans Unicode",
             "Trebuchet MS",
             "Lucida Sans",
              sans-serif;
}

This looks fine in Chrome, FF, Safari. When I check in IE (6, 7, and 8), no dice. Fonts everywhere on the site are an ugly serif typeface! I fire up IE 8 developer tools and see little rectangle characters in the declaration that seem to fall on the line breaks. I revise my CSS to

body {
font-family: "Century Gothic", "URW Gothic L", "Apple Gothic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Lucida Sans", sans-serif;
}

and this works mint. Fine, problem solved, but if I want to format my CSS for readability why shouldn't I be able to? Why is my whitespace relevant? Is this a utf/iso charset issue? Do I just have to let long lines run long?

Answer 1

Is this a separate style sheet or is it styles you created in your tag? You may be able to pull it out into a .css file and that may stop the issue.

IMO let this one go. This should be the exception not the rule for you to have a css rule that is this long.