Question

I think this problem is best explained by images. This is how my accordion looks:

When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty):

As you can see, the container is not growing taller together with the accordion and it does not look good.

This problem only occurs in IE7 and IE8. It works in Firefox and Chrome.

The HTML looks like this (simplified):

<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>

The CSS, again 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, after a lot of research, it turned out that the curvycorners plugin is causing the problem, here’s what you have to do:

1. Download the latest version of the plugin (also try to upgrade your jQuery, but this is only a tip)

2. change your rounded-corners CSS to the following:

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

3. in your JS and after toggleing the ULs, you need to redraw the corners, refer, using the following:

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