CSS

There were far too many pages to go hand-edit, but fortunately there was a global stylesheet used.

First thought was to use BLOCKQUOTE {margin-left:45px;margin-right:45px;}
as this seemed to work in everything until I fired up netscape 4 which ADDS the margin, not fix it.

So I looked at @import and voice-inherit workarounds
which were far too complicated and messy for such a minor problem.

After extensive playing around, I hit upon this workaround
which WORKS ACROSS ALL BROWSERS I can find on windows
and simply stops Netscape 4 from processing the command.

BLOCKQUOTE {/;margin-right:45px;margin-left:45px;}

see the lead /;? no quotes, nothing else like the voice-inherit trick

netscape simply does not use the line but processes the rest of the CSS!
all other 4.x+ browsers process the CSS command properly!

I am really happy its this easy. The only negative is that
I doubt this will validate as good CSS, but hey gotta
try to make our lives easier while keeping the visitors happy eh?

Hope this helps some other CSS tortured soul out there.
Let me know if anyone has seen this elsewhere. 20 minutes on Google didn't show anything like that documented.

-aV-

Thanks for sharing that discovery ;) -- NN4 appears to ignore the entire rule not (as I first thought you meant) just one line of the rule.

So..

.test {/; color: #FFFFFF; background-color: #000000; }

will be completely ignored by NN4, I think this could be very useful for say a 3 column layout with a right positioned section for example...

Would also like to know if someone else has discovered this, I've never seen it before and I think (subject to testing) that you may have stumbled on something very useful that we as CSS authors can really benefit from.

Thanks for taking time to post it!

Nick

What's really important is that every other browser
does process the CSS instruction and that only netscape 4
ignores it (I could care less what 3.x browsers do)

Could the Mac and Linux people please give this a try and let us know what happens?

Three possibilities to check for in other browsers:
1. The /; is ignored and CSS is processed
2. The /; halts processing for only that CSS instruction
3. The /; halts processing for the rest of the CSS file

If #3 happens in ANY 4.x+ browser then this discover is useless.
If #2 happens in some cases, then it's mildly useful.
If #1 happens for everything other than NS 4, this is great!

I'm on Linux, works as you said in my NN4...

<added>This is the only other thing I could find even remotely similar, not as usefull though:
Another NN4 Hack

Nick

Does the voice-family: "\"}\""; trick pass validation?
Perhaps it might cause it has quotes. Oh well.

I can live with a single stylesheet not 100% validated.

-aV-

Their trick is good for large sections of code

This one is infinitely more simple for simple fixes

The question is for the one browser they found to have a partial issue:

Opera 5.0 for Mac is partially affected, but it can be easily worked around. It only ignores the rule immediately following /, so including an empty rule directly after the comments eliminates the problem

Anyone got a Mac with Opera 5?

I'd love to know what IE5+ and NN4 on Mac make of this if anyone would care to try it..

Nick

Rules for handling parsing errors in CSS1

I think regardless of what they say if it passes a realworld
test its gonna be very useful... Opera 7 is probably the
most strict CSS2 browser around if I am not mistaken,
and it hops right over the /; and processes the entire instruction (opera 6 too)

Tried your earlier example on a Mac (OS9.1):

.test {/;
color: #FFFFFF;
background-color: #000000;
}

IE5 obeys this rule. NN4.7 ignores it. Opera 5 and Netscape 6 obey. Just a quick test though, and didn't try anything complicated such as the BLOCKQUOTES and HR issue mentioned earlier.

A word on validation guys, let's not turn the thread into a 'is validation important' type discussion. That's not the issue really and we all have differing opinions.

Feel free to start a new thread though ;)

Back on topic
So, we're pretty certain now that this new hack will indeed only affect NN4 right?

The next question is, is it a genuine new discovery? -- I've done a lot of searching and found nothing, anyone else turn up anything?

Nick

To anyone who is helping to test:

please make SURE that all CSS rules
after the ignored line for NN4
are actually processed, and that
all procssing does NOT stop from that line
(ie. only that one rule is skipped)
A single rule stylesheet is not a full test.

Thank you!

(so its pretty much confirmed working on Mac I guess)

NS4 either was designed before this rule was created, or it simply has a bug there. Actually, I suspect that you could just as well use a more informative, but still invalid element in the same place:

.test {NS4: ignore-this-rule; color: #FFFFFF; background-color: #000000; }

Does exactly as you say. Anyone confirm on Win/Mac?

If this is right then the original hack is incorrect. The hack should read something like this:

To stop NN4 parsing an entire CSS rule, simply add a line of text (anything) with no semi-colon at the end.

Even simpler...

Nick

Nick, I think it DOES need a semicolon to end the
element, if it's valid or not. Hmm if we used an
element that was too new for NN4 but valid in general
then this should even pass validation, no?
Can anyone find such a reliable element?

simply ignore the "invalid" element, while still following the rest of the rule

To summarize:

All os versions of Netscape 4.x (including 4.80 on windows)
appear to ignore an *entire* rule that starts with an invalid element
(such as {notNN4; ) but all other browsers appear to SKIP
the *single invalid element* and process the rest of the rule.

I'd say that's darn easy and useful. Cannot believe no one has spotted this until now?

Ahem, maybe it took a girl to find this, eh guys? :)

Nick

NS4 implemented CSS on top of JavaScript. This makes for some interesting coding techniques but certainly has its disadvantages as well. The main one being that it really does not conform to the CSS standard.

Andreas

well not just that :) but we tend to see through overly complicated things...
I actually have done that a few times at different jobs I have had,
take a 10 step process and make it into 3 (Keep It Simple Silly)

Hey if it only helps just one other person I am quite pleased! -aV-

(ps. the hack could be {aVhack; ;) )

Looks like this is a NN4 exclusive across all platforms.
(and you can use whatever made up rulename you want)

ie.
HR {aVhack;width:150px;}

every 4.x+ browser *except NN4* will process
the above (producing horizontal rules of 150px)!

Anyone have any ideas? Anyone know where to start checking for such potential accessibility problems?

However that may be it certainly is a nice find and nice application amznVibe.

Andreas

Nick

Expanding on the concept: Has anyone tried what happens when doing this in an inline style?

<div style="NS4:ignore;color:#FFFFFF;background:#000000;">...</div>

Since W3C standard compliance is a requirement for WAI compliance you cannot advertise your site as being accessible according to WAI.

Otherwise there seem to be little problems, since any standard compliant UA is required to ignore your errors.

Is that circular reasoning? Mmmbop Not really. It just removes one safety net from the original two (both content author and UA programmer need to follow the standards).

Andreas

Just as Tantek Celig received received credit for the box model hack, you might think about whether you'll post your real names here.. to receive named credit where credit is due. I hope so, do others agree?

I have a feeling this thread will get quite a few references in the future. I'll be flagging this thread for sure.

HR {azimuth:inherit;width150px;}

HR would not be processed at all for NS4 but all other CSS1
and CSS2 browsers would give HR's a width of 150px,
and azimuth has no effect on any other part of HR in reality.

I still think aV:hack is more catchy though :)

-aV-