Question

I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make the div opaque on hover.

When someone using a browser (or firefox with noscript) without javascript the div simply remains invisible. The problem with this is that I do not want the content to be inaccessible. I also do not want to leave the div visible then use the script to make it transparent as the div is located at the bottom of the document and it causes a noticeable flicker whenever a page loads.

I have tried using noscript tags to embed an additional style sheet that is only loaded for people without the luxury of Javascript but this fails the XHTML strict validation. Is there any other way to include extra styling information inside a noscript block that is XHTML valid?

Ed:

With a simple test case I get a validation error of: document type does not allow element ‘style’ here. This is with an empty XHTML Strict document with a style element inside a noscript element. The noscript is inside the body.

Answer 1

To clear up the validation issue: noscript is only allowed in the body element, style only allowed in the head. Therefore, the latter is not allowed within the former.

On the general issue: you’ll want to make the div element visible by default, then hide it via CSS + javascript. This is the ‘progressive enhancement’ model. I notice you say you ‘don’t want to do this because of the flicker’, but I’m not sure exactly what’s causing this – chances are you can fix it, so maybe you should post that as a question.