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"> </div>
</div>
<div class="clear"> </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;
}
