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

Even I have encountered this, so after a lot of struggles, I have devised a trick that works fine. Instead of styling the noscript tag, cover the element to be shown when javascript is disabled in a div and then display none that div using javascript. Hence, when javascript is disabled the viewer shall see the div you intended them to see, but if javascript is enabled the div will be styled as display none by the scrip you wrote making it not visible.

See below an example:

Normally we do this:

• html: <noscript> please enable javascript ... </noscript>
• css: noscript{background-color: red; color: white; font-size: 24px; ... } noscript{background-color: red; color: white; font-size: 24px; ... }

---

Instead do this:

• html: <div class="noscript"> please enable javascript </div>
• css: .noscript{background-color: red; color: white; font-size: 24px; ... } .noscript{background-color: red; color: white; font-size: 24px; ... }
• js: const noscript = document.querySelector('.noscript').style.display="none";

Answer 3

try this css

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