I was working on some javascript code recently to automatically reformat a <code> tag into an <ol> list so each line of code was in a separate <li> and so got a “line number”, as well as some other trickery to preserve indentation etc when I stumbled across a bug in Firefox 2.0.0.2 that I’ve not seen mentioned elsewhere so I thought I’d mention it here for interest.
For part of this “source code in a HTML list” script, I wanted to have alternating background colours for each line. Trying to keep the code as lightweight as possible (its currently less than 700 bytes - more on that in a later post…), I just used the mod operator to add a simple numeric class name to the element - the code looked a little like this:
for (j=0;j<lines.length;j++) {
// Stuff
li.className=(j%2);
// More Stuff
}
So the idea here was that each <li> element would end up being either <li class=”0″> or <li class=”1″>. No need for fancy class names here - I was looking for a really simple and elegant solution. But Firefox cant “see” purely numeric class names!
And thats not all - it seems that any class name that is either totally numeric, or even just starts with numbers (for example “20pixmargin” or something) wont be picked up by Firefox. Opera and Internet Explorer both see these no problems, after all the DTD says that “class” is CDATA so Firefox really should just accept these numerical class names without a problem.
Try it your self!
Try pasting this code into a new HTML document and taking a look in Firefox and the other big two:
<head>
<style>
p.1 {
color : red;
}
p.b {
color : blue;
}
</style>
</head>
<body>
<p class="1">This should be red.</p>
<p class="b">This should be blue.</p>
</body>
Firefox will show the “This should be red.” in the default colour (usually black) whereas IE or Opera happily do what they are told. So if you are scratching your head wondering why Firefox isn’t doing what you want, make sure you aren’t using class names that start with a number…
March 19th, 2007 at 4:42 am
And rightly so, since a class name is a CDATA, with additional constraints. Read the spec: http://www.w3.org/TR/html401/types.html#type-cdata. You may also check your DOCTYPE — if you are using HTML4 or XHTML, then validations are absolutely strict.
This is yet another area where IE is broken, not FF.
March 19th, 2007 at 9:28 am
Reading the W3C specs for css2, I have found this :
# In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.
Full specs can be found here : http://www.w3.org/TR/REC-CSS2/
So it finally don’t appear to be a bug …
Cheers, Lint
March 19th, 2007 at 11:11 am
Fair enough - I stand corrected! It would appear then that this is in fact a bug in IE, and also Opera too … something a bit more unusual!