Question

In all browsers (e.g. Firefox, Chrome, IE9) clicking my overlay fires my onClick function. However, in IE8, it is as if the box does not exist in the way that it is not clickable, and content behind is. Here’s my code:

HTML:

<div id="pageblock" onclick="closelogin()"></div>
<div id="loginbox"><!--This is where my form is--></div>

CSS:

    #loginbox{
        z-index: 10;
        position: absolute;
        height: 83px;
        top: 105px;
        right: 20px;
        width: 400px
        overflow: hidden;
        padding: 5px;
    }
    #pageblock{
        display: none;
        position: fixed;
        z-index: 7;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
    height: 100%;
    width: 100%;
    }

IE8 and earlier CSS:

#pageblock{
    background: transparent !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}

Thanks!

Answer 1

The error, as you’ve already identified, stems from the use of -ms-filter. It seems that the act of applying the filter changes how the browser calculates the width and height, so the clickable area is reduced to the text within the pageblock div, and not the whole div itself.

The simplest solution would be to use a background image: a small 5px x 5px 60% transparent black .png will work just fine, will add a minimal footprint to your overall page size, has browser support from IE7 upwards, and will not overwrite the width/height declarations you’ve set for pageblock.

I can see a number of other issues with the code you posted; the z-indexing you’ve applied means that the loginbox will appear over the top of pageblock (is that intentional?). Also, you’ve specified that loginbox should appear 20px from the right of the page, but you’ve given it a width of 100%. That computes to a total width of 100% + 20px, which is wider than your page will display. Try and avoid mixing measurement units – either make the right pposition percentage-based and deduct it from the width declaration, or specify the with of loginbox in pixels. You’ll save yourself a lot of headaches in the long run.