Opera bug with absolutely postioned divs

Opera calculating incorrect height on absolute positioned div with top margin

by johntrepreneur

HTML

<div id="divHtml">
    <div id="header">
        <input type="button" value="Show Opera defect" onclick="showDefect();"></input>
        <input type="button" value="Apply WorkAround" onclick="applyWorkAround();"></input>
    </div>
    <div id="innerwrap">
        <img src="http://tempo5.sandicor.com/SNDImages/0/110061056_101_81.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/58/120056634_101_81.jpg" class="mapListImage"/>
        <img src="http://tempo5.sandicor.com/SNDImages/239/120055791_101_81.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/112/120024176_101_81.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/103/080081511_101_81.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/168/100017320_101_12.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/130/100028034_101_81.jpg" class="mapListImage" />
        <img src="http://tempo5.sandicor.com/SNDImages/6/110002438_101_81.jpg" class="mapListImage" />
    </div>
</div>

CSS

*
{
    margin: 0px;
    padding: 0px;
}
#divHtml
{
    overflow: hidden;
}
#header
{
    height: 68px;
    background: #53A9FF;
}
#innerwrap
{
    position: absolute;
    bottom: 0px;
    top: 0px;
    margin-top: 68px; /*problematic for Opera*/
    overflow: auto;
    width: 300px;
}
.mapListImage
{
    width: 200px;
}
input
{
     width: 150px;   
}

JavaScript

function showDefect()
{
    $('#innerwrap').css('margin-top', '68px');
    $('#innerwrap').css('top', '0px');
}
function applyWorkAround()
{
    $('#innerwrap').css('margin-top', '0px'); //remove top margin
    $('#innerwrap').css('top', '68px'); //acccount for header height using "top" style associated with absolute positioning
}