Question

I’ve been googling and querying stackoverflow quite a bit but I haven’t found this exact problem duplicated anywhere else. It’s probably something silly I’ve forgotten.

What I’m trying to do:

Making a navigation by pressing the right or the left side of the image by using a two-part overlay. The code worked just as I wanted it in the other browsers and I was happy until I tried it in IE.

Here’s my now slaughtered code. I’ve removed the right side of the div etc. This does not work for me in Internet Explorer 8 (haven’t tried IE 7/9 yet) unless I either:

• Set a background-color to .navi_left
• Remove the image in .top
• If i put content into .navi_left the content (for example a text) is clickable, in the other browsers the full div is clickable.

Any of those options will make the .navi_left clickable in IE 8.

The html generated:

<div class="image_div_big" style="width:600px;">
<div class="top">
   <img src="../img/20110331-200524-1.jpg" class="image_big" width="600" height="450">
   <div class="navi_left" id="172" style="width:312px;height:474px;"><!--placeholder--></div>
</div>
</div>

The CSS:

.image_div_big {float:left;}
.top {position:relative;width:100%;height:100%;}
.navi_left {cursor:pointer;cursor:hand;position:absolute;top:0px;left:0px;z-index:5;border:1px solid black;}

The javascript:

    $('.navi_left').click(function(){
        var id = $(this).attr('id');
        if (id != '') {
            window.location = '/index_temp.php?i='+id;
        }
    });

MY SOLUTION:

I finally agreed that I needed to do as suggested below. However I refused to have an IE-specific stylesheet, so I just did it as this:

.navi_left {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}
.navi_right {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}

Answer 1

I had a similar problem and in the end resorted to an IE specific stylesheet and just gave the clickable area a background colour and a:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

Not the prettiest solution, but it works.

To put @Jared Farrish’s comment in the answer itself; I added the following code to the head of my html to address only IE using conditional comments:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen"  href="/styles/ie.css" />
<![endif]-->