Verschiebung durch <form>-Tag

[Tomi]

Hallo Zusammen!

Ich habe da ein Problem, das mich schon seit Längerem beschäftigt. Immer wenn ich den form-Tag in z.B. einer Spalte benutze, verschiebt sich das darin enthaltende Objekt (z.B. ein Image-Button). Zumindest ist das bei mir im IE6 der Fall.

Bsp.:

<table width="540" height="25" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td align="left"><a href="warenkorb.php?ShoppingCart=clear"><img src="images/warenkorb_loeschen.gif" alt="Warenkorb komplett löschen" width="140" height="31" border="0"></a></td>
<td align="right">
<form method="post" action="http://www.amazon.de/exec/obidos/dt/assoc/handle-buy-box=/" name="cart" target="_blank">
<input type="hidden" name="asin.B00018HU4U" value="1">
<input type="hidden" name="tag-value" value="domainde-21">
<input type="hidden" name="tag_value" value="domainde-21">
<input type="hidden" name="dev-tag-value" value="dsgsdgsdhsdh">
<input type="image" src="http://www.domain.de/images/kaufabschluss.gif" border="0" alt="Kauf abschließen" name="submit.add-to-cart" value="Kauf jetzt abschließen">
</form>
</td>
</tr>
</table>

Die beiden Images sollten sich eigentlich auf gleicher Höhe befinden, doch durch den form-Tag steht das eine Bild nicht auf der gleichen Linie wieder das andere. Wieso? Im Opera-Browser wird es dagegen richtig angezeigt.

Danke für die Antwort!

[Lutz]

Da ist nicht das FORM-Tag schuld, sondern die vertikale Ausrichtung der Tabellenzellen.

Trage in jede TD Zelle das Attribut valign="TOP" ein und es sollte funktionieren.

Gruß,
Lutz

[Thomas Luethi]

Hallo,

Immer wenn ich den form-Tag in z.B. einer Spalte benutze, verschiebt sich das darin enthaltende Objekt (z.B. ein Image-Button).

Mal auf's wesentliche reduziert:

<table ...>
<tr>
<td align="left"><a href="..."><img src="..." alt="..." width="140" height="31" border="0"></a></td>
<td align="right">
<form ...>
<input type="image" src="..." alt="..." ...>
</form>
</td>
</tr>
</table>

Mir faellt auf: In der linken Zelle steht der Link (ein Inline-Element)
als direktes Kind in der Tabellenzelle.
In der rechten Zelle steht ein Formular (Block-Level-Element),
der einen grafischen Button enthaelt, in der Tabellenzelle.

In vielen Browser-Stylesheets hat das FORM-Element ein paar
Pixel margin oder padding.

Ich wuerde mal versuchen, aus dem Formular ein Inline-Element
zu machen und/oder seine margin und border auf Null zu setzen:

td form { display:inline; margin:0; padding:0; }

Die horizontale und vertikale Ausrichtung des Inhalts den Tabellenzellen
koenntest Du auch mit CSS loesen.
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align

HTML:
<td class="zelle1"><a ...><img ...></a></td>
<td class="zelle2"><form ...>...</form></td>

CSS:
td.zelle1 { text-align:left; vertical-align:top; }
td.zelle2 { text-align:right; vertical-align:top; }

Natuerlich kannst Du auch weiterhin die (IMHO* veralteten)
HTML-Attribute zur Ausrichtung verwenden, z.B.
<td align="left" valign="top">
u.s.w., siehe:
http://selfhtml.teamone.de/html/tabellen/gestaltung.htm#ausrichtung_zellen

Gruesse,

Thomas

(*) Das W3C predigt zwar AFAIK, dass man mit (X)HTML die Struktur (structure)
und z.B. mit CSS das Layout (presentation) regeln soll.

Die Ausrichtung des Inhalts von Tabellenzellen ist fuer mich ein optisches
Detail (also Layout), ebenso wie cellspacing und cellpadding.

Deshalb kann ich nicht verstehen, dass all diese Layout-Attribute
(align, valign bei TD/TH, cellspacing, cellpadding bei TABLE)
selbst in XHTML 1.0 Strict und XHTML 1.1 (Table Module) immer
noch enthalten sind und nirgends als "deprecated" bezeichnet werden.

Den Satz zu XHTML 1.0 Strict
http://www.w3.org/MarkUp/#flavors
  "XHTML 1.0 Strict - Use this when you want really clean structural mark-up,
  free of any markup associated with layout."
kommt mir da sehr seltsam vor...