title: CSS div overlay unclickable in internet explorer
body: <p>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.</p>
  
  <p>What I'm trying to do:</p>
  
  <p><strong>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.</strong></p>
  
  <p>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) <strong>unless I either</strong>:</p>
  
  <ul>
  <li>Set a background-color to .navi_left</li>
  <li>Remove the image in .top</li>
  <li>If i put content into .navi_left the content (for example a text) is clickable, in the other browsers the full div is clickable.</li>
  </ul>
  
  <p>Any of those options will make the .navi_left clickable in IE 8.</p>
  
  <p>The html generated:</p>
  
  <pre><code>&lt;div class="image_div_big" style="width:600px;"&gt;
  &lt;div class="top"&gt;
     &lt;img src="../img/20110331-200524-1.jpg" class="image_big" width="600" height="450"&gt;
     &lt;div class="navi_left" id="172" style="width:312px;height:474px;"&gt;&lt;!--placeholder--&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>    $('.navi_left').click(function(){
          var id = $(this).attr('id');
          if (id != '') {
              window.location = '/index_temp.php?i='+id;
          }
      });
  </code></pre>
  
  <p><strong>MY SOLUTION:</strong></p>
  
  <p>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:</p>
  
  <pre><code>.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);}
  </code></pre>