Überlappende Tabellenzellen in Firefox

[Bastian]

Hallo zusammen

Die Grafik zeigt eine vierspaltige, dreizeilige Tabelle in Firefox dargestellt.

Das Stylesheet sieht folgende Formatierung vor:

td {
	vertical-align: middle; }

.input {
	width: 100%;
	background: #444444;
	border: 1px solid #444444;
	padding: 3px;
	margin: 2px; }

Wie es scheint, führt die padding-Angabe beim Formularfeld für die Überlappung der Zellen. Ich möchte jedoch nicht darauf verzichten, da ich es für schöner empfinde, wenn der Eingabetext den Rand des Felds nicht berührt.

Hat jemand eine Idee, wie ich das korrigieren könnte?

 

[ThaHammer]

schreib das padding halt in die td rein, statt ins Input Feld?

 

[Bastian]

Kriegt input kein padding, dann berührt der Text eben den Feldrahmen (siehe Bild 2). Da wollte ich eben einen Abstand erzwingen.

 

[ThaHammer]

Na dann gib beiden ein padding!

 

[Bastian]

Ich hab jetzt herausgefunden, wo das Problem liegt.

Die padding-Pixel werden bei der Breitenbestimmung den width-Angaben hinzugerechnet. Wenn das input-Feld mit width: 100% deklariert wird und noch padding > 0 besteht, dann wird die Gesamtbreite des Felds 100% + padding-Pixel und deshalb breiter als die Zelle selbst.

Gelöst habe ich es, indem die Spalten der Tabelle eine feste Breite in Pixel erhalten und für die Formularfelder zusätzliche Klassen (w150, w300,…) für die width-Angaben definiert werden.

 

[ThaHammer]

Ich hab jetzt herausgefunden, wo das Problem liegt.

Die padding-Pixel werden bei der Breitenbestimmung den width-Angaben hinzugerechnet. Wenn das input-Feld mit width: 100% deklariert wird und noch padding > 0 besteht, dann wird die Gesamtbreite des Felds 100% + padding-Pixel und deshalb breiter als die Zelle selbst.

Gelöst habe ich es, indem die Spalten der Tabelle eine feste Breite in Pixel erhalten und für die Formularfelder zusätzliche Klassen (w150, w300,…) für die width-Angaben definiert werden.

Stimmt das hatte ich auch erst letztens wieder!