Design verschwindet nach <form>-Definition...

[Bulingar]

Guten Abend zusammen,

erst einmal die Ausgangssituation: ich bin dabei eine Homepage zu entwerfen. Ich bin gerade an dem Teil, an dem man sich für bestimmte Bereiche der Homepage einloggen muss.

Dazu habe ich auf der Startseite der Homepage einen Dialog entworfen:

Der Code-Teil dazu sieht folgendermaßen aus:
[...]
  ~~~html

<div id="ContentPane">
    <?php
      require("Home.htm");
      require("LoginPane.htm");
    ?>
    </div>

[...]  
  
Hier die Datei LoginPane.htm  
  ~~~html
  
  <div id="LoginPane">  
    <br>  
     <table border="0" align="center" background="#C0C0C0">  
      <colgroup>  
       <col width="50%">  
       <col width="50%">  
      </colgroup>  
      <tr>  
       <td>Benutzername: </td><td><input type="text" name="Benutzername" size="14"></td>  
      </tr>  
      <tr>  
       <td>Kennwort: </td><td><input type="text" name="Kennwort" size="14"></td>  
      </tr>  
     </table><br>  
     <div align="center">  
       <input type="submit" value="Einloggen" size="12">&nbsp;&nbsp;<input type="button" value="Registrieren" size="12"><br>  
  </div>  
       <div id="LoginState">  
         Sie sind momentan nicht eingelogged!<br><br>  
       </div>  
       <div id="LoginHelp">  
         <u><a href="PWReset.js">...Kennwort vergessen?</a></u>  
       </div>  
    <div id="GalleryPictureLocation">  
     <img src="Gallery.png" width="50%" height="50%">  
    </div>  
    <div id="GalleryText">  
     <h3><a href="Index_Gallery">Bildergallerie</a></h3>  
    </div>  
    <div id="ControlPictureLocation">  
     <img src="ControlPicture.png" width="50%" height="50%">  
    </div>  
    <div id="ControlText">  
     <h3><a href="Index_Administration">Einstellungen</a></h3>  
    </div>  
 </form>  
  

Hier dann noch den Inhalt der zugehörigen CSS-Datei:

  
#LoginPane {  
  position: absolute;  
  background: #FFCE9C;  
  font-size: 13px;  
  top: -1%;  
  left: 93%;  
  width: 20%;  
  height: 38%;  
}  
  
#LoginState {  
  position: absolute;  
  top: 43%;  
  left: 11%;  
  font-size: 11px;  
  color: red;  
}  
  
#LoginHelp {  
  position: absolute;  
  top: 48%;  
  left: 22%;  
  font-size: 11px;  
}  
  
#GalleryPictureLocation {  
  position: absolute;  
  top: 65%;  
  left: 75%;  
}  
  
#GalleryText {  
  position: absolute;  
  top: 64%;  
  left: 25%;  
}  
  
#ControlPictureLocation {  
  position: absolute;  
  top: 78%;  
  left: 75%;  
}  
  
#ControlText {  
  position: absolute;  
  top: 75%;  
  left: 25%;  
}  

So - jetzt wollte ich den nächsten Schritt machen, und zwar eben den <form>-Tag einbinden damit beim Drücken des Buttons Login auch was passiert (sollte ja das Ziel sein).

Der Effekt den ich jetzt nicht verstehe: wenn ich den Befehl <form action="blablabla.php" mehod="POST"> einsetze, egal an welcher Stelle vor den Buttons ich das tue, verschwindet sämtlicher Inhalt aus dem Panel:

Allerdings nur im IE (ich benutze die Version 8), der Firefox zeigt weiterhin den korrekten Inhalt an.

Kann mir einer einen Tipp geben, woran ds liegt und noch besser - wie ich es umgehe?

Gruß und einen schönen Abend noch
Kai