IE: Simple HTML Tabelle macht Probleme
Daniel (unregistriert)
- html
hallo,
habe ne eigentlich ganz simple Tabelle, siehe hier:
http://ddt435gd.piranho.com/register.htm
<table width="100%" border="1">
<tr>
<td colspan="2">
<b>Benutzername</b>
</td>
</tr>
<tr>
<td width="150px">
<input type="text">
</td>
<td>
4-20 Zeichen (A-Z, a-z, 0-9, keine Leerzeichen)
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Account anlegen">
<p><b>Hinweis</b>
<br>Sofern JavaScript aktiviert ist, erfolgt beim Klicken auf "Account anlegen"
vor dem Senden des Formulars eine Überprüfung der Eingaben.
</td>
</tr>
</table>
Man beachte die Angabe <td width="150px"> und schaue sich an, wie groß der IE diese Spalte (es ist die Spalte mit dem Textfeld) darstellt - deutlich größer, während es im Firefox keinerlei Probleme gibt.
Entferne ich den Hinweis
"<br>Sofern JavaScript aktiviert ist, erfolgt beim Klicken auf "Account anlegen" vor dem Senden des Formulars eine Überprüfung der Eingaben."
stellt auch der IE die Spalte mit dem Textfeld in der richtigen Größe dar - aber die Spalte mit dem Hiwneis dürfte doch (aufgrund von colspan) überhaupt keinen Einfluss auf die Größe der Spalte mit dem Textfeld haben? Wie fixe ich dieses Problem?
(gebe ich der Spalte rechts neben dem Textfeld eine entsprechend große width Angabe, so wird die linke Spalte mit dem Textefeld kleiner, aber da die gesamte Tabelle 100% groß ist, macht eine 2. feste px Angabe wenig Sinn, zumal es doch auch so gehen muss).
Nachtrag, das ganze nochmals auf weniger Quellcode reduziert, aber mit dem selben Problem:
http://ddt435gd.piranho.com/register2.htm
<table width="100%" border="1">
<tr>
<td width="150px">
<input type="text">
</td>
<td>
4-20 Zeichen (A-Z, a-z, 0-9, keine Leerzeichen)
</td>
</tr>
<tr>
<td colspan="2">
<br>Sofern JavaScript aktiviert ist, erfolgt beim Klicken auf "Account anlegen"
vor dem Senden des Formulars eine Überprüfung der Eingaben.
</td>
</tr>
</table>
Hi,
der Tabelle hast du eine width von 100% gegeben. Dann gibt doch der td mit dem input-Felf eine width von 10% oder so. Das funktioniert dann.
Warum das mit den px-Angaben, kann ich dir auch nicht sagen, aber mit %-Angaben löppt det.
Grüße,
Thorsten F.
Also 100px gibts bei CSS. Wenn man die überholte Methode 'width=' verwendet gibt es z. B. "100" (=pixel) oder "100%" die Einheit px ist da nicht erlaubt und wird möglicherweise nur tolleriert.
Ich würde mir das einfach abgewöhnen und mit der Verwendung von CSS beginnen.
Hallo Daniel,
die Positionierung (und das Aussehen) von HTML-Elementen bestimmt man mit CSS, nicht mit Tabellen.
Dein zweites Beispiel könnte dann (auf die Schnelle gebastelt) z.B. so aussehen:
<div style="border:1px double black;">
<span style="font-weight:bold;">Benutzername</span>
<div style="float:left; width:150px;">
<input type="text">
</div>
<div style="margin-left:150px;">
4-20 Zeichen (A-Z, a-z, 0-9, keine Leerzeichen)
</div>
<p>
<span style="font-weight:bold;">Hinweis</span>
<br>Sofern JavaScript aktiviert ist, erfolgt beim Klicken auf "Account anlegen"
vor dem Senden des Formulars eine Überprüfung der Eingaben.
</p>
</div>
(Ist jetzt nicht elegant mit den inline-styles, aber als Demo reicht es.)
Shepard
Also, habe das ganze inzwischen anderst gelöst, und aus dem Hinweis utnen einfach ne 2. Tabelle gemacht.
Ich weiß, dass man das mit CSS macht, muss echt mal langsam drauf umsteigen ):
Wenn ich mir dein Beispiel so anschaue, dauerts wohl auch net lange das zu lernen :-)
Verzichte auf die Tabelle. Bei Deinem Login-Formular handelt es sich um keine tabellarischen Daten. Breitenangaben besser mit CSS machen statt mit dem veralteten width-Attribut.