Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

noscript Ghost Bug

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

<noscript> elements shows up when scripting is enabled; only borders/background is showing from it

Date of the Tutorial

Sun Jul 19 15:53:21 2009

Description

Thanks to Position is Everything for this bug. Unlike what they claim to be an IE8 bug, this bug also affects IE7 and 6; although, not as severely. Let's glance at the demo:

Demo

Due to the nature of the bug, the demo is shown on a separate page.

HTML Code:
<div>bar</div>
<noscript>CAN HAS SKRIPTZ! PLZ??! KTNX!</noscript>
CSS Code:
noscript {
    border: 5px solid #000;
    background: #f00;
    display: block;
    width: 500px;
    height: 100px;
}

The <div> is there just for the trigger; instead of it can be text or anything else, really, anything that a normal page would have. We got background and border set on our <noscript> element as well as display property set to block. In IE8 the entire <noscript> element is shown along with borders and background with the set width and height, although with no text (we are talking about when scripting is enabled). IE6 and IE7 display just the top (or bottom? lol) border of <noscript> element.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (JavaScript Solution)

Date of the Solution

Sun Jul 19 16:00:25 2009

Fixed Versions

all of the affected

Description

Since the bug occurs when scripting is enabled, perhaps we can use that scripting to fix it. Here's the fixed demo:

Due to the nature of the bug, fixed demo is shown on a separate page.

HTML Code:
<div>bar</div>
<noscript>CAN HAS SKRIPTZ! PLZ??! KTNX!</noscript>
CSS Code:
noscript {
    border: 5px solid #000;
    background: #f00;
    display: block;
    width: 500px;
    height: 100px;
}
JavaScript Code:
window.onload = function () {
    var els = document.getElementsByTagName('noscript');
    for ( var i = 0; i < els.length; i++ ) {
        els[i].style.display='none';
    }
}

The only thing that our JavaScript script does is set display to none on all of the <noscript> elements in the page. Since now there are hidden from view, no bugs appear. Easy as pie, huh?

Comments

Create new comment

  • Jon

    Wed Mar 23 19:34:42 2011

    Alternatively, you should just NOT style <noscript> tags directly and only style content that is in between the <noscript> tags.

    <noscript>
    <div style="[style goes here]"></div>
    </noscript>

  • G

    Tue Feb 16 19:39:36 2010

    you can detect if js is off or on using that bug
    interesting

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia