Accordion display problems in IE6/7 when parent has a background

[banacan]

Whenever an upper panel closes, the lower panel bars remains where they were when the upper panel was open, and they do not return to their correct position until the mouse has hovered over. The lower panels are not open, just the bar is separated from the bar above that was previously opened.

I should note that I have this accordion set as follows:

active: false, autoHeight: true, collapsible: true

This means that the accordion bars are completely disconnected and are floating over content below.

[RedNinja]

The error occurs if the parent element has a background set. Happens in IE 7 but not in firefox 3.

Eg.

            <DIV STYLE="background:white;">
                    <div ID="accordion">
                       <h3><a href="#">Section 1</a></h3>
                       <div>
                          Section 1 content
                       </div>
                       <h3><a href="#">Section 2</a></h3>
                       <div>
                          Section 2 content
                       </div>
                       <h3><a href="#">Section 3</a></h3>
                       <div>
                          Section 3 content
                          

                       </div>
                       <h3><a href="#">Section 4</a></h3>
                       <div>
                          Section 4 content                            
                       </div>
                    </div>                                          
         </DIV>                                                          
          	
       
       
       <SCRIPT LANGUAGE="javascript">
            
            $("#accordion").accordion({autoHeight:false});

             
       </SCRIPT>

[RedNinja]

I've found a fix. Just add a width to the parent element :)

              <DIV STYLE="background:white;width:100%;">

           
                    <div ID="accordion">
                       <h3><a href="#">Section 1</a></h3>
                       <div>
                          Section 1 content
                       </div>
                       <h3><a href="#">Section 2</a></h3>
                       <div>
                          Section 2 content
                       </div>
                       <h3><a href="#">Section 3</a></h3>
                       <div>
                          Section 3 content
                          

                       </div>
                       <h3><a href="#">Section 4</a></h3>
                       <div>
                          Section 4 content                            
                       </div>
                    </div>
                    
                                                            
         </DIV>                                                          
          	
       
       
       <SCRIPT LANGUAGE="javascript">
            
            $("#accordion").accordion({autoHeight:false});

                
       </SCRIPT>

[Scott González]

Fixed in ​936a9a6.

[Scott González]

Accordion: Default accordion to 100% width. Fixes #4615 - Accordion display problems in IE6/7 on panel close.

Changeset: 936a9a6d9ccd676ee53bf029ee336773ba16697d