Ausrichten in Zellen: Text und Felder

[Andi]

Hallo!

Ich habe eine Tabelle mit einer Spalte Text und einer Spalte mit Feldern. Selbst wenn ich die margin-Angaben auf null setzte, sind die Spalten mit dem Text geringfügig nach oben verschoben, also der TEXT in den Feldern ist weiter unten. Wenn ich das Textfeld mit CSS farblich unsichtbar mache, fällt es extrem auf.

Mit einer Ausrichtung baseline funktioniert das ganze zwar, allerdings habe ich dann bei mehrzeiligen textfeldern das Problem, dass in der Nur-Text-Spalte der Text eben auch ganz unten positioniert wird.

Hat jemand eine Idee?

Gruß
Andi

[Der Martin]

Hallo Andi,

Mit einer Ausrichtung baseline funktioniert das ganze zwar, allerdings habe ich dann bei mehrzeiligen textfeldern das Problem, dass in der Nur-Text-Spalte der Text eben auch ganz unten positioniert wird.
Hat jemand eine Idee?

Hast du schon versucht, sowohl dem Text als auch den Eingabefeldern explizit die gleichen Werte für margin-top und padding-top zuzuweisen? Ich vermute, dass ein Eingabefeld durch das browsereigene Stylesheet einfach einen Hauch padding bekommt, der reine Text aber nicht.

So long,
 Martin

[Andi]

Hallo Andi,

Mit einer Ausrichtung baseline funktioniert das ganze zwar, allerdings habe ich dann bei mehrzeiligen textfeldern das Problem, dass in der Nur-Text-Spalte der Text eben auch ganz unten positioniert wird.
Hat jemand eine Idee?

Hast du schon versucht, sowohl dem Text als auch den Eingabefeldern explizit die gleichen Werte für margin-top und padding-top zuzuweisen? Ich vermute, dass ein Eingabefeld durch das browsereigene Stylesheet einfach einen Hauch padding bekommt, der reine Text aber nicht.

So long,
Martin

Das ist eine gute Idee. Ich habe margin und padding beim Eingabefeld entfernt, jetzt sollte ich wohl noch den einfachen Text noch um das fehlende padding (in der Größe des Feldboxrandes) ergänzen.

Gruß
Andi

[Gernot Back]

Hallo Martin,

Hast du schon versucht, sowohl dem Text als auch den Eingabefeldern explizit die gleichen Werte für margin-top und padding-top zuzuweisen? Ich vermute, dass ein Eingabefeld durch das browsereigene Stylesheet einfach einen Hauch padding bekommt, der reine Text aber nicht.

Es bekommt vor allem auch eine andere Schriftgröße (ggf. auch -art) und eine andere Zeilenhöhe, wenn man nichts dagegen unternimmt und für den IE braucht es natürlich auch noch einen Extra-Hack, um Text und Input-Elemente bei jeder Schriftart und -größe annähernd auf die gleiche Zeile zu zwingen:

  
* { font-family:serif; } /*  oder eine andere */  
  
input {  
   font-size:1em;  
   line-height:1em;  
   background-color:transparent;  
   padding:0;  
   border:none;  
}  
  
* html input { margin:.1em 0 -.1em; }  

Gruß Gernot