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

[Bulingar]

Sorry, das mit den Bildern hat nicht so ganz funktioniert.

Link zum bisherigen Panel: http://s5.directupload.net/file/d/2265/5fhm5k24_jpg.htm

Link zum Panel nach dem Einfügen des <form>-Tags:
http://s1.directupload.net/file/d/2265/alv3oxg8_jpg.htm

[ChrisB]

Hi,

weder sind die Bilder bei der Problemanalyse hilfreich (zeigst du deinem Automechaniker auch ein Foto von deiner Karre, und willst dann von ihm wissen, warum sie nicht mehr startet?), noch der Code in besonderem Maße, weil der teilweise serverseitig ist, was bei einem clientseitigen Problem erst mal reichlich uninteressant ist.

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:

Dann hast du vermutlich grob fehlerhaftes HTML erzeugt.

Nutze den Validator, um deinen HTML-Code auf Fehler zu prüfen: http://validator.w3.org/

MfG ChrisB