noscript tag isn't working on internet explorer

Question

I have a website with the <noscript> tag that works just fine on all browsers except IE (7,8,9,10). After I disable scripting under the security settings inside Internet Options, On my PC only I can the the <noscript> content on IE, but on other PC's (almost all of them) I can't see the code. With these PC's we go with the same settings to Gmail's and FB's sites and we do get the warning for not having js enabled.

This is the HTML:

<noscript>
    <div class="noscript">
        JavaScript must be enabled in order for you to use WEBSITE NAME in standard view.<br />
        However, it seems JavaScript is either disabled or not supported by your browser.<br />
        To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>. 
    </div>
</noscript>

CSS:

.noscript {
    background: red;
    color: #fff;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 3;
}

Any ideas?

Thanks!

Answer 1

Encountered this issue as well. I had this working in IE and then it stopped all of a sudden. What I found is that if your css is nested beneath a noscript tag in your actual css definition it will not work. If you use just a class name its fine.

I'm using IE 10 to test with and their dev tools to change the document mode to older browser modes to verify. Results may vary when actually using older browsers. Report back if this is the case.

Example html:

<noscript>
    <div class="noscript">
        JavaScript must be enabled ...
    </div>
</noscript>

Doesn't Work:

// classes nested beneath a noscript tag are not applied by IE
noscript div.noscript {
        display: block;
        text-align: center;
        color: white;
        font-weight: 700;
        background: #D53333;
        margin: 0 auto;
        padding: 4px;
    }

Does work:

div.noscript {
    display: block;
    text-align: center;
    color: white;
    font-weight: 700;
    background: #D53333;
    margin: 0 auto;
    padding: 4px;
}

Answer 2

try this css

.noscript {
   background: red;
   top: 100px; 
   color: #fff;
   padding: 10px;
   text-align: center;
   position: relative;
   z-index: 3;
}