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