Stack Overflow-like JavaScript warning and w3c HTML validation

Question

I have a website that relies heavily on JavaScript. While most of the stuff downgrades nicely, the functionally is really second-grade. So, I wish to alert the users that they should turn JS on if they have disabled it. To do this, I use NOSCRIPT to show a div with alert a top of the page, similar to how Stack Overflow does it.

This div covers top of the page content, so I have to move the document body down. Since JS is not available one has to use CSS, and I use something like: margin-top: 8px. The complete HTML looks like this:

<noscript>
<style type="text/css">body { margin-top:8em; }</style>
<div class="warn">WARNING<br>Turn on JavaScript for best experience</div>
</noscript>

The problem is: where do I place this code?

I tried in the HEAD section, in the BODY section, after the BODY, but wherever it is placed, W3C HTML markup validator complains that either document type does not allow element "STYLE" here or document type does not allow element "BODY" here

I even tried to separate CSS and DIV into two parts and find a proper placement for each of them, but got the same errors.

Answer 1

You may just have to suck it up and accept your page will not validate.

...or change how it works. Can you place it first with position: static so it naturally pushes your page content down?

...or, to be tricky make your body always have margin-top: 8em. Then on DOM ready (or window load) in JavaScript, make it 0.

CSS

body {
   margin-top: 8em;
}

body.javascript {
   margin-top: 0;
}

JavaScript

window.onload = function() {
   document.getElementsByTagName('body')[0].className += ' javascript';
};

Answer 2

You need to have a block element (e.g. div) inside the noscript element AND move the style element inside the head element to gain proper validation.