Stack Overflow works best with JavaScript enabled banner
<p>I am trying to mimic this site's Javascipt required banner, and have the below divs which are being hidden if javascript is allowed/enabled, but I am getting a flash/glimps of it on page load.</p>

<pre><code>&lt;div id="Main_noJS"&gt;Craftystuff.com works best with JavaScript enabled&lt;/div&gt;
&lt;div id="PartOfMain_noJS"&gt;&lt;br /&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#Main_noJS {
    width: 100%;
    height: 23px;
    font-family: Arial;
    font-size: 111%;
    color: White;
    font-weight: bold;
    background: #AE0000;
    text-align: center;
    padding-top: 4px;
    position: fixed;
    z-index: 100;
}
</code></pre>

<p>JavaScript:</p>

<pre><code>// hide the "Craftystuff.com works best with JavaScript enabled" banner, if JavaScript is working
if ($("#Main_noJS")) {
    $("#Main_noJS").hide();
    // hide the spacer between the main content and banner...
    $("#PartOfMain_noJS").hide();
}
</code></pre>

<p>So the banner is visible to start with, and only when javascript is enabled do I hide it</p>

<ul>
<li>but javascript must take a second to get to work to hide things...</li>
</ul>

<p>I would like to try to stop the glimps of the banner, when the page first loads, any help?</p>
