title: .toggle is not working properly in IE8
body: <p><strong>In IE8 the toggle kinda works but it overlays the content below.</strong> It works fine in all the other browsers. I've been trying for the past 2 hours to fix this but no luck...</p>
  
  <p><a href="http://www.sopranowebdesign.com/static/test.html" rel="nofollow">Here's what I mean</a></p>
  
  <p><strong>jquery</strong>:</p>
  
  <pre><code>$(document).ready(function() {  
  
      $('.toggle').hide();
  
      $('.expand-all').click(function(){
          // switch visibility
          $(this).data('is_visible', !$(this).data('is_visible'));
  
          // change the link depending on whether the element is shown or hidden
          $(this).html( (!$(this).data('is_visible')) ? 'Expand all' : 'Hide');
  
          $(this).next().toggle();
  
      return false;
      }); 
  
  
  });
  </code></pre>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>    &lt;div id="categories"&gt;
          &lt;div class="cat"&gt;
              &lt;h3&gt;Rice&lt;/h3&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Rice brand 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Rice brand 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="expand-all"&gt;Expand all&lt;/li&gt;
                  &lt;div class="toggle"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Rice brand 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Rice brand 1&lt;/a&gt;&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="cat"&gt;etc&lt;/div&gt;
          &lt;div class="cat"&gt;etc&lt;/div&gt;
          &lt;div class="cat"&gt;etc&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>