3

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);}
2
  • 1
    Your PHP code is irrelevant to the browser's behavior and this question. Please show the HTML and JavaScript that your PHP produces--that the browser sees--instead. (And ideally, create a standalone, pared-down, reproducible test case on jsfiddle.net)
    – Phrogz
    Mar 31, 2011 at 20:54
  • 6
    "I was happy until I tried it in IE" - This oughta be inscribed on Steve Ballmer's gravestone. Mar 31, 2011 at 21:06

2 Answers 2

6

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]-->
8
  • 3
    Just in case you're wondering how to do that, How to Create an IE-Only Stylesheet. Mar 31, 2011 at 21:19
  • @Jared Farrish Thanks for the addition, I should have mentioned that.
    – jeroen
    Mar 31, 2011 at 21:21
  • This is also called a "conditional comment". Mar 31, 2011 at 21:21
  • 4
    @jeroen - No problem. Sometimes it's worth hunting down why IE is not working, but sometimes it can't be fixed or it isn't worth the time. I've used conditionals. Mar 31, 2011 at 21:22
  • 2
    @Jared Farrish If you want your site to behave in IE6 and up, it´s almost impossible to avoid IE specific style-sheets.
    – jeroen
    Mar 31, 2011 at 21:27
0

If you are already using filter/-ms-filter the previous solution of setting a background color and then setting its opacity to 0 will not work for you. Instead you can set your background-image to a 2x2 transparent png and continue using your existing filter/-ms-filter's with no negative effects.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.