Tuesday 09 July 2002
CSS validation blues
Disillusion emailed me about two problems he’d discovered in the source code of my main index page: a stray </td> tag (an artifact of my arcane editing procedure) and <tr> and </tr> tags that I neglected to remove when I added a <caption> tag to my calendar table code. These faults were preventing my page from validating. Since Disillusion had been decent enough to alert me, how could I refuse his request to use my design as a theme for his own site?
I realized that it’s not enough to validate your site once, stick up the W3C merit badge, and forget about it. Rather the price of standards-compliance is eternal vigilance. So, once I’d corrected the errors Disillusion had pointed out, I tried validating the CSS only to find there are problems with it too. Specifically, the validator seemed to be unhappy with the style declaration associated with Tantek Çelik’s “ugly brilliant hack that protects IE5/Win from its own stupidity.” For instance, I’m using it to set the height of my banner DIV:
voice-family: "\"}\"";
voice-family:inherit;
height:55px; /* the correct height */
The W3C CSS validator flagged the following errors in my style sheet:
Line: 19 Context : #banner
Invalid number : voice-family
Property voice-family doesn't exist for media screen : "\"}\"" Line: 20 Context : #banner
Invalid number : voice-family
Property voice-family doesn't exist for media screen : inherit
The same style sheet validated when I created this design (based on a BlueRobot template) a couple of months ago. I created a test page and linked it to the default BlueRobot style sheet. It validated. I looked for a difference between my main index page and the dummy page and found one: my index page uses the @import method (to deny Netscape 4.x access to the style sheet) whereas I linked the test page to the default BlueRobot style sheet using a <link> tag. When I replaced the <link> tag with the @import method, the BlueRobot style sheet no longer validated. And that was the change I’d made after the site validated: I replaced the <link> with an @import.
Validation that depends on how the style sheet is linked to the HTML document—this might be a question for the css-discuss list.
Permalink
That is downright freaky. I don't think you've got anything wrong, myself. What's legal one place ought to be legal just about everywhere.
The media type should be "all" for the hack to validate. Did you specify the media type when you tested the method?
If you did specify "screen", it should not have worked and I'm stumped. If you did not (or it was "all:), the "problem" is not the method of linking the spreadsheet, rather the media type.
Sigh... I meant:
Did you specify the media type when you tested the method?
I am of the opinion that the CSS validator should have a special mode to ignore known hacks like this. It is technically correct that voice-family does not exist in media "screen", but changing your stylesheet to media="all" would make all these styles bleed into your print stylesheet, which is surely undesirable.
Even the latest version of the W3C's guidelines clearly states that "for markup, *except where the site has documented that a specification was violated for backward compatibility*, the markup has passed validity tests of the language."
So don't f---ing worry about it.
Excellent - not surprising that I was missing something important.
Thanks for the pointer, Mark.
Agreed with Mark, it is the media type thing.
I hardly ever use the voice-family hack. Instead, I use 'exotic' selector combinations that MIE/Win savely (and stupidly) ignores.
element { width: 300px; /* MIE value */ }
html>body element { width: 290px; /* value for non-broken browsers */ }
Has it's limitations sometimes, but goes with all media types.
OK, Mozilla 1.1 alpha is definitely not ready for prime time. My apologies.
::chuckle:: Ah, yes, the Mozilla nine-times bug. I have no clue why it happens, but I know it definitely exists (or did exist in the past); it's bitten me more than a few times in CGI-based chat rooms, usually with an angry response from other participants until I explain that my browser was responsible for the flooding. :)
Seems like they've gotten rid of it in 1.1 final and 1.0.1, though. Or at least I haven't had it happen in those versions...maybe it's just a fluke, though.
At least it gave me a chance to use the word "nonuple" more than I needed to, though...
Er. Seems the multi-post bug hasn't been fixed yet, according to Bugzilla...I guess I've just been lucky, then.
Regarding the vs. @import problem. Couldent you first link a stylesheet and then @include whatever you dont want NS4 to see from inside that stylesheat ... I mean sinse the validator bugs out on the IE boxmodel hack if you use @import then link it, and use a @import from inside the stylesheet to get the nasty to NS rules ...
Just a thought, let me know if you try and it works ok?
d-Pixie, I could do that but my current method is also an expression of disapproval towards NS4. I'm not interested in putting any effort whatsoever into supporting a shit browser that's almost six years old.
This discussion is now closed. My thanks to everyone who contributed.
© Copyright 2002-2003 Jonathon Delacour
That is downright freaky. I don't think you've got anything wrong, myself. What's legal one place ought to be legal just about everywhere.
Posted by: Dorothea Salo on 8 July 2002 at 11:08 PM