Jeglicher Inhalt wird über einer Tabelle platziert, obwohl es im Quellcode unter dieser steht

  • Hallo,
    ich habe 2 Tabellen erstellt, und seltsamerweise wird der gesamte Inhalt, der im Quellcode nach der zweiten Tabelle steht, innerhalb des <div></div> der zweiten Tabelle, genau über ihr platziert. Aber der Aufbau beider Tabellen ist identisch.
    Hier sieht man das Problem:
    html-seminar.de/woltlab/attachment/874/


    Wenn ich unter der Tabelle (auch unterhalb der divs) noch eine Tabelle einfüge, wird alles unter der Zweiten platziert, aber dann innerhalb des Kästchens, des Spoilers ?(


    Falls relevant, hier der Code:

    HTML
    <div class="spoiler" id="spoiler02">
        <p>&nbsp; &nbsp; <a href="javascript:spoiler('spoiler02')" class="s-header">Levels object placement sheets</a></p>         <table class="wikitable">               <thead>                <tr><th colspan="9" class="cornertopleft cornertopright tkopf" align="left" style="padding:5px; background-color: #000; cursor: text;">Notes:    </th></tr>         <tr>               <th width="90px">Address GameCube<br />[PAL/EUR]</th>                  <th width="90px">Address GameCube<br />[NTSC-U/USA]</th>               <th width="90px">Address GameCube<br />[NTSC-J/JPN]</th>               <th width="90px">Address Wii U/HD<br />[Regionfree]</th>               <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">0 </a>1 2 3 </th>               <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">4 </a>5 6 7 </th>               <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">8 </a>9 A B </th>               <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">C </a>D E F </th>               <th>String-ID</th>     </tr>               </thead>    <tbody  style="font-family:'Courier New'"><tr><td>81462110</td><td..........</tr>
        </tbody        </table>    </div>



    wikitable.css



    spoiler.css

    CSS
    .spoiler{    border-radius: 15px;    color: #fff;    height: 25px;    margin: 3px;    overflow: hidden;    box-shadow: 0px 0px 15px 10px #80f;    margin-top: 50px;    margin-bottom: 50px;}
    .spoiler p:first-child{height: 25px;margin: 0px;background-color: #000;}
    .s-header{ font-size: 18px;font-family: sans-serif;    font-style: oblique;}



    spoiler.js

    JavaScript
    function spoiler (expand){    var spoiler = document.getElementById(expand);    if (spoiler.style.height != "auto")    {        spoiler.style.height = "auto";    }    else    {        spoiler.style.height = "25px";    }}


    Ich hab den Verdacht, es liegt an der Spoiler-Box..
    Mit nur einer Tabelle, klappte alles wunderbar (könnt Ihr auf meiner Website sehen, falls es helfen könnte: http://cosmocortney.ddns.net/enzy/wind_waker_wiki_en.php


    EDIT: Ich glaube ich bin dem auf der Spur. Es könnte am .spoiler p:first-child liegen. Habe es geschafft, dass die Tabelle angezeigt wird, wie sie soll, nur wurde nun alles nach der Tabelle auf ihr überlappend angezeigt.


    EDIT 2: das ist jetzt sehr seltsam. Habe ein weiteres/drittes </table> (obwohl es bereits 2 Tabellen (also zwei <table>) gibt) eingefügt und nun ist es genau soe, wie es sein soll. Wie kann das sein!?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!