AJAX Drag Panel toolkit – drag panel issue with IE6

I found another issue with IE6 today relating to a drag panel ajax extender I was implementing in a page. First of all when I moved the drag panel to the right hand side of the screen the panel was changing size. This is likely to be related to the panel conforming to the width set on its parent container.

The drag panel code:

   1: <asp:Panel ID="pnlDetailsContainer" runat="server" style="display:none;" CssClass="containerBox">

   2:     <asp:Panel ID="pnlDetailsHeader" runat="server" CssClass="popupBoxHeader">

   3:         ....        

   4:     </asp:Panel>

   5:     <div class="pnlDetailsMarkup">

   6:         ...some markup...

   7:     </div>

   8: </asp:Panel>

The CSS:

   1: .containerBox

   2: {

   3:     border-style:solid;

   4:     border-width:2px;

   5:     border-color:Black;

   6:     background-color:#ffffff;

   7:     width:300px;

   8: }

To fix this resizing problem i put the whole panel into a surrounding div:

   1: <div class="detailsContainer">

   2: ...panel..

   3: </div>

Set the width and height parameters in CSS and it works fine in IE7 and Firefox 3. But not IE6. For some reason in IE6 it puts the div in and therefore moves other page elements out of place instead of just showing when required.

To fix this I set an IE6 specific style to a height and width 1px. This had the desired effect.