jQuery: IE8 margin collapses when using slideUp()/slideDown()

Question

I've uploaded a test file here:

http://dl.dropbox.com/u/2201804/IE8test.html

If you click on the "Click me" divs, you'll see the "Feedback" divs appear using slideDown(). Clicking a "Click me" in another box slides the currently showing feedback up and slides down the appropriate feedback.

In IE8, after the slideUp()/slideDown() actions are complete, the margin between the boxes collapses.

Is this a problem with jQuery's animation or a display bug in IE8?

Answer 1

Hi

I don't have a solution for you using margins, but if you replace margin with padding, IE8 will play along. In your case, you would need an extra container div, because you are already using the padding and you have a background colour set.

So your solution could look like this:

<div class="assessment">
  <div class="inner">
    <div class="question">
...

.assessment { 
  padding-top: 20px; 
  background: transparent; 
}

.assessment .inner {
  background-color:#DDDDDD;
  border:1px solid #CCCCCC;
  color:#555555;
  display:block;
  padding:10px 0;
  text-align:left;
  width:100%;
}

Cheers tj

Answer 2

overflow: hidden;

should do the work :)