Axel Richter: Positioniertes Eingabefeld ragt aus Tabelle heraus

Beitrag lesen

Hallo,

Wie man sehen kann, handelt es sich um zwei Tabellen, die beide jeweils normalen Text und ein Eingabefeld beinhalten: die erste in zwei getrennten Spalten, die zweite in einer einzigen Spalte, wobei das Eingabefeld durch Style-Angaben positioniert wurde. Leider ignoriert die Tabelle im zweiten Fall die Höhe des Textfeldes, welches somit aus der Tabelle herausragt (zumindest in IE6 und Mozilla 1.5). Ziel ist aber natürlich, dass die zweite Tabelle genauso aussieht wie die erste. Wie kann ich das erreichen?

Wenn Du mit einer Tabelle arbeiten musst, weil mehrere solcher Aufstellungen (Text->Inputfeld) untereinander stehen, dann nimm eine Tabelle mit zwei Spalten. Genau das ist der Sinn von tabellarischer Darstellung. Eine Tabelle mit einer Tabulation innerhalb einer Zelle ist Unsinn.

Wenn Du das Ganze nur einmal brauchst und nur den Abstand zwischen Text und Inputfeld bestimmen möchtest, notiere zwei Inline-Elemente nebeneinander und nutze den linken Margin des zweiten Elementes als Abstand. Das diese Elemente umgebende Blocklevel-Element wird dann seine Höhe an der Höhe des höchsten der beiden Elemente ausrichten, wenn keines der beiden Elemente aus dem normalen Elementfluss herausgelöst wird. Genau das geschieht aber durch position:absolute. Mit vertical-align:middle, in jedem der beiden Inline-Elemente, richten sie sich vertikal mittig aneinander aus.

viele Grüße

Axel