Akkordeon aus seinem Behälter "herauswachsen" - in IE7/8

Question

Ich denke, dass dieses Problem am besten durch Bilder erklärt werden kann. Dies ist, wie mein Akkordeon aussieht:

Wenn Sie auf das kleine Plus klicken/Minus-Symbole, um die Folien unter jedem Kapitel/einklappen ausklappen. Wenn der Inhalt im Akkordeon jedoch zu groß wird, wächst er aus seinem Behälter heraus. Also, wenn ich auf mehr Pluszeichen, das Akkordeon wird wie folgt aussehen (nicht schön):

Wie Sie sehen können, ist der Behälter nicht größer wächst zusammen mit dem Akkordeon und es sieht nicht gut aus.

Dieses Problem tritt nur in IE7 und IE8 auf. Es funktioniert in Firefox und Chrome.

Das HTML sieht wie folgt aus (vereinfacht):

<div id="content"> 
    <div class="box2 rounded-corners"> 
     <div class="chapters"> 
      <h3><a href="/clientarea/view/archived-course/teid/133">Obsah</a></h3> 
      <div id="accordion"> 
       <ul> 
          ... // accordion content - too long 
          ... // accordion content - too long 
          </ul> 
       <div class="clear">&nbsp;</div> 
     </div> 
     <div class="clear">&nbsp;</div> 
      </div> 
      <div class="training-body"> 
       ... // content to the right of the accordion 
      </div> 
     </div> 
</div> 

Die CSS, wieder siplified:

html, body { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 
#content { 
    background: white url('/images/background_middle.png') left top repeat-x; 
    padding: 13px; 
    min-height: 40em; 
    height: auto !important; 
    height: 40em; 
} 
/* this is the div with rounded corners */ 
#content .box2 { 
    background: white; 
    padding: 0 15px 15px; 
    border: 1px solid #C5E3F8; 
    position: relative; 
} 
/* left sidebar 98 
#content div.chapters { 
    float: left; 
    width: 224px; 
} 
/* orange heading "OBSAH" */ 
#content div.chapters h3 { 
    color: #ff6e19; 
    text-transform: uppercase; 
    font-size: .9em; 
    text-align: center; 
    padding-bottom: .5em; 
    margin-top: 1em; 
    margin-bottom: 0; 
} 
#content div.chapters h3 a { 
    color: #ff6e19; 
} 
/* accordion */ 
#accordion { 
    width: 226px; 
    border-top: 1px solid #c5e3f8; 
} 
#accordion ul { 
    padding-left: 0; 
    margin-top: 0; 
    margin-bottom: 0; 
    margin-left: 0; 
} 
/* area to the right of the accordion */ 
#content div.training-body { 
    float: left; 
    padding-left: 0px; 
    width: 748px; 
    line-height: 1.3em; 
} 

Answer 1

Hmmm, nach viel Forschung unterstützen IE6 hinzufügen möchten, es stellte sich heraus, dass das curvycorners Plugin das Problem verursacht, ist hier, was Sie tun müssen:

1. die neueste Version des Plug-Ins Download (auch versuchen, Ihre jQuery zu aktualisieren, aber das ist nur eine Spitze)

2. ändern Ihre abgerundeten Ecken CSS auf die folgenden:

   .rounded-corners { 
       -moz-border-radius:2ex; 
       -webkit-border-radius:2ex; 
   } 
   

3. in Ihrem JS und nach toggle die ULs ing, müssen Sie die Ecken redraw, refer, die folgende Verwendung:

   $this.parent().parent().children('ul').toggle(); 
   curvyCorners.redraw(); 
   

Answer 2

EDIT sorry, meine erste Antwort falsch war

Das Problem ist, mit der eingestellten Mindesthöhe. IE 7 und 8 unterstützen min-height, aber falsch handle! Wichtig, nicht die Priorität gegenüber der nächsten Deklaration zu geben. Entfernen Sie einfach die beiden Höhenlinien. Wenn Sie die Höhe der Regel wie folgt

... 
    min-height: 40em; 
} 
* html #content { 
    height: 40em; 
}