1

I'm using noscript to display a banner at the top of the page if a user has javascript disabled. It is similar to the one SO used when your browser's JS is disabled.

My problem, if you visit the page, it displays the noscript raw text with no CSS styles applied. If you hit F5 or click the refresh button, then suddenly the CSS applies and the warning gets the correct red background and bold larger text.

Why is this happening? I'm getting this behavior in Chrome (latest) and IE10... as well as old IE8 and FireFox 3.x series.

Here's my noscript tag which is in the body of the page:

<noscript><div id="noscript-frame">Website.com works best with JavaScript enabled</div></noscript>

CSS looks like:

#noscript-frame{
    background-color: #AE0000;
    color: #FFFFFF;
    font-weight: bold;
    font-style: normal;
    font-size: 1.5em;
    font-family: "Verdana", Arial, Helvetica, sans-serif;
    vertical-align: middle;
    text-align: center;
}

When you first load the page, it ends up looking like this with no styles applied, just raw text:

Website.com works best with JavaScript enabled

when you refresh the page, then it applies the styles and everything looks good.

Any ideas how I can fix this? I tried having the div populated without using the noscript tag and then having javascript hide it's contents upon page load, but this causes the infamous screen flicker on page load...

4

0 回答 0