Question

This issue occurs in our beloved Internet Explorer 7:

I have a list of items, each with a hidden child div. When user clicks the “expand” button in any list item, the hidden div will expand downwards and push all content beneith it lower.

This works just as it should in FF, Chrome, IE8 – but IE7 will not expand the parent element along with its children. This is noticeable because the top-most parent container has an absolutely positioned image at the very bottom (yea… rounded corners) – that doesn’t get pushed down when the content expands.

I’m guessing that’s because of the absolute positioning… Just wondering whether I should attempt to code up some huge workaround in jQuery just for that (assuming I’m able to), or if this is a known issue of some sort.

My HTML:

<div id="container">
   <ul>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
   </ul>

   <div id="containerbottom"></div>
</div>

The CSS:

#container { position:relative; }
#container #containerbottom { position:absolute; bottom:0px; left:0px; }

The jQuery is pretty much your everyday slide function:

$('ul li').click(function() {
   $(this).children('.hide').slideDown(200);
});

Any ideas?

Answer 1

after much testing, this is what I have found out:

$(document).ready(function(){

   $('ul li').click(function() {

     $(this).children('.hide').slideDown(200, function(){

       if($.browser.msie && $.browser.version == '7.0' ){
          $('#containerbottom').css('top',$(this).closest('ul').height()+'px');
       }

     });

   });

})

it’s not that good but fixes the problem…