Positionierungs (Textumfluss?) Probleme mit DIV's unter Opera

[Manu]

Hi Leute,

für meinen Volleyballverein mache ich gerade eine HP. Auf der rechten Seite gibt es für jede Mannschaft eine kleine Übersicht die mit JavaScript ein und ausgeklappt werden kann. Schaut mal unter:

http://www.volleyball-willsbach.info/index.php

Wird aber unter Opera ein Feld aufgeklappt, schieben sich die darunterliegenden nicht nach unten wie bei IE und Netscape. Diese werden einfach übermalt. Die DIV - Elemente scheinen dort irgendwie aus dem Textfluss herausgelöst zu sein. Meine bisherigen Versuche mit float, display waren aber erfolglos. Hat da jemand eine Idee ??

Hier der Source:

// index.css

.rightnavigationarea{
    position    : absolute;
    left        : 805px;
    top         : 130px;
    width       : 192px;
    height      : 445px;
    z-index     :   1;
    border-left : 1px solid #4D7C97;
    border-right: 1px solid #4D7C97;
    border-top : 1px dashed #4D7C97;
    border-bottom: 1px dashed #4D7C97;
    background-color: #FAFAFA;
}
.overviewcontainer{
    position    : relative;
/*  height      :  27px;*/
/*  display     : block;*/
    line-height : 10pt;
    margin      : 2px 0px 3px 0px;
    overflow    : hidden;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size   : 8pt;
    text-align  : left;
    color       : #000000;
    border-left   : 1px dashed #4D9FE1;
    border-right  : 1px dashed #4D9FE1;
    border-top   : 1px solid #4D9FE1;
    border-bottom : 1px solid #4D9FE1;
    background-color: #FFFFFF;
}

// index.tpl.htm
[...]

<div class="rightnavigationarea">
    <div style="padding : 4px 3px 0px 3px;">
    <div class="ueberschrift">Übersicht</div><br>
    {OVERVIEW}
    </div>
</div>

[...]

In das Template {OVERVIEW} werden jetzt mit PHP nacheinander mehrer DIV - Boxen eingefügt:

// overview.tpl.htm

<div id="{LAYER_ID}" class="overviewcontainer">
    <table border="0" width="170px"><tr>
    <td width="154px" class="textbold">{MANNSCHAFT}:</td>
    <td width="16px">
        <a href="javascript:expand({JSF_LAYER_ID})">
        <img border="0" name="img_pfeil{LAYERNUMMER}" src="doppelpfeil_unten.gif" height="14" width="14"></a></td>
    </tr></table>
</div>

Mit der Javascriptfunktion expand wird einfach nur die Höhe des DIV - Layers verändert:

// overview.js

function expand(id){
    if(id_expanded != "")    implode(id_expanded);

if(document.all)
        eval("document.all."+ id + ".style.height = 102");
    if(document.getElementById)
        document.getElementById(id).style.height = 102;

set_pfeil_oben(id);
    id_expanded = id;
}

Kann mir da jemand helfen ?? Ich mach da schon den ganzen Morgen rum und komme aber nicht weiter.

THX im Voraus