hasLayout.net

Affected Versions

This bug affects: IE8, IE7

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

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 ' element"><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 ' element"><noscript> element as well as display property set to block. In IE8 the entire ' element"><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). IE7 display just the top (or bottom? lol) border of ' element"><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:

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 ' element"><noscript> elements in the page. Since now there are hidden from view, no bugs appear. Easy as pie, huh?