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:

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

Comments

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

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.

Posted by: Bill Simoni on 8 July 2002 at 11:32 PM

Sigh... I meant:
Did you specify the media type when you tested the method?

Posted by: Bill Simoni on 8 July 2002 at 11:33 PM

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.

Posted by: Mark Pilgrim on 8 July 2002 at 11:59 PM

Source: http://www.w3.org/WAI/GL/WCAG20/

Posted by: Mark Pilgrim on 9 July 2002 at 12:00 AM

Excellent - not surprising that I was missing something important.
Thanks for the pointer, Mark.

Posted by: Bill Simoni on 9 July 2002 at 12:26 AM

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.

Posted by: Kris on 9 July 2002 at 08:13 AM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:44 PM

Kris, the problem with html>body selectors is that IE 6 ignores them, but IE 6 gets the box model right (if you give it the right DOCTYPE and it's operating in standards mode). The voice-family hack is so useful precisely because only IE4/5/5.5 is affected. Also required for using font-size keywords, which IE4/5/5.5 gets wrong, but IE 6 (and everyone else) gets right.

Sources:

http://www.alistapart.com/stories/sizematters/

http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Posted by: Mark Pilgrim on 9 July 2002 at 12:45 PM

OK, Mozilla 1.1 alpha is definitely not ready for prime time. My apologies.

Posted by: Mark Pilgrim on 9 July 2002 at 12:46 PM

Ok Mark, nine times, now i can no longer ignore it : )

Okay, so here is my suggestion in regard to the voice-family hack:

media="screen,aural"

Now here is the problem. Using this as an attribute in a LINK element to link to a stylesheet, everything is fine and the CSS validates (non-aural CSS gets ignored for the aural media type, non-visual CSS gets ignored for the screen media type).

Using a STYLE element with the same media attribute as above, causes an error in the CSS validator at http://jigsaw.w3.org/css-validator/validator-uri.html

Multiple media types are allowed in the media attribute, separated by commas. So unless I am overlooking something, I think that this validator is broken:
http://www.w3.org/TR/html4/present/styles.html#h-14.2.3

You can see it here:
http://www.xs4all.nl/~apple77/test/
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.xs4all.nl%2F%7Eapple77%2Ftest%2F&warning=2&profile=css2

Posted by: Kris on 9 July 2002 at 08:55 PM

::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...

Posted by: codeman38 on 24 September 2002 at 02:21 AM

Er. Seems the multi-post bug hasn't been fixed yet, according to Bugzilla...I guess I've just been lucky, then.

Posted by: codeman38 on 24 September 2002 at 02:29 AM

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?

Posted by: d-Pixie on 18 March 2003 at 08:32 PM

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.

Posted by: Jonathon Delacour on 19 March 2003 at 07:14 AM

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2002-2003 Jonathon Delacour