Weird Disappearing Margin in IE8

Weird Disappearing Margin in IE8

Hello,

I am having a weird problem with trying to create a collapsible panel. I'm still pretty new to JQuery and can't get this to work right.

The problem is that whenever a panel closes, the 50px margin-top of the group-panel below it suddenly vanishes and then reappears instantly when it is reopened.

I think I've narrowed the problem down to lines 16-18, the ones that control the arrow icon on the side. Removing them fixes the problem, but I would like to keep this feature. The same thing happens when I use an image element instead of a div for the arrow. IE's DOM inspector doesn't show anything weird. I have no idea what causes this.

This page works fine in Firefox, IE6, IE7, Opera, Chrome and everything else I've tested it on, but IE8 doesn't seem to like it.

Thanks for the help

Here is arrows.gif: http://j.photos.cx/arrows-6ed.gif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Test</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
         $(document).ready(function()
         {
            $(".item-options-panel").hide();

            $(".item-header").click(function()
            {
               $(this).next(".item-options-panel").slideToggle("slow");
               
               var arrow = $(this).children(".flip-arrow");
               arrow.toggleClass("down-arrow");
               arrow.toggleClass("right-arrow");
            });
         });
      </script>
      <style type="text/css">
         p { margin: 0; padding: 0 }
         .group-panel { margin-top: 50px; }
         .item-header { background-color: red; }

         .item-options-panel
         {
            padding-bottom: 15px;
            background-color: yellow;
         }

         .flip-arrow
         {
            float: left;
            width: 11px;
            height: 11px;
            background: url("arrows.gif");
         }

         .down-arrow { background-position: 0 0; }
         .right-arrow { background-position: 0 -11px; }
      </style>
   </head>
   <body>               
      <div class="custom-list">
         <div class="group-panel">
            <div class="item-header"><div class="flip-arrow down-arrow"></div>Group 1</div>
            <div class="item-options-panel">
               <p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
            </div>
         </div>
         <div class="group-panel">
            <div class="item-header"><div class="flip-arrow down-arrow"></div>Group 2</div>
            <div class="item-options-panel">
               <p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
            </div>
         </div>
         <div class="group-panel">
            <div class="item-header"><div class="flip-arrow down-arrow"></div>Group 3</div>
            <div class="item-options-panel">
               <p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
            </div>
         </div>
      </div>
   </body>
</html>