Zelle nicht rechteckig, obwohl definiert

[ThoRr]

Hi,

ich habe das Problem, dass eine Zelle einer Tabelle nicht rechteckig ist, obwohl sie es nach der Definition sein müsste. Der Zelle wird eine Höhe von 44 Pixeln sowie eine Breite von 44 Pixeln zugewiesen, sie erscheint daraufhin allerdings viel zu breit.

Da allen Zellen ein Innenabstand von 4 Pixeln zugewiesen wird und ich weiß, dass dieser auf die Maße aufgerechnet wird (was ich ja für sowas von sinnlos halte), habe ich einfach mal versucht, dann die Breite um 8 Pixel zu verringern, auch wenn mir nicht ganz schlüssig ist, warum der Innenabstand von der Breite nicht abgezogen, aber von der Höhe schon abgezogen werden sollte. Aber es hat anscheinend tatsächlich funktioniert, denn die Zelle zumindest augenscheinlich rechteckig. Wenn ich allerdings die Tabelle ausdrucke und nachmesse, ist die Zelle 0,5 cm breiter als hoch.

Die "Problemseite": http://thorr.square7.ch/stundenplan/stud1a.xhtml

Es handelt sich um die erste Zelle oben links (im weiteren Sinne um alle der ersten Spalte). Ihr wird durch den Elementselektor für th und td zunächst eine Höhe von 44 Pixeln,eine Breite von 85 Pixeln und ein Innenabstand von 4 Pixeln zugewiesen:

td, th {
	padding: 4px;
	width: 85px;
	height: 44px;
	border: 1px solid #000000;
	font-size: 12px;
	text-align: left;
	vertical-align: top; (...)
}

Da ich jedoch die Klasse "first-col" definiert habe, trifft folgendes auf die Zelle zu:

td.first-col, th.first-col {
	width: 36px;
	border-right-width: 2px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle; (...)
}

Wie kann es sein, dass hier bei der Angabe gleicher Werte für Höhe und Breite völlig unproportionale Maße herauskommen? Wenn ich den Innenabstand der Breite abziehe, dann habe ich ein annäherndes Ergebnis, das scheint allerdings nur Zufall zu sein.

LG

 

[Maik]

Hi,

die Zellen sind doch alle rechteckig / -winklig ;-)

Oder hättest du es lieber "quadratisch - praktisch - gut"?

Du berücksichtigst hier nicht, dass neben dem von dir erwähnten Innenabstand ebenso die border-Regeln hinzugerechnet werden, und damit sind wir dann bei der Berechnung von Breite und Höhe im Box-Modell.

Die Diskrepanz zwischen Breite und Höhe dürfte demnach in horizontaler Ausrichtung der CSS-Regel border-right-width:2px zuzuschreiben sein, und height:44px zuzüglich dem oberen und unteren Innenabstand (2*4px), sowie Rahmen (2*1px) ergibt 54px.

mfg Maik

 

[ThoRr]

Stimmt, da hast du recht - runde Zellen wären ein wenig merkwürdig Ich meine tatsächlich quadratische Zellen.

Merkwürdig ist allerdings, dass, wenn ich nun diese Diskrepanz von 2 Pixeln beachte, indem ich sie von der Breite abziehe, dennoch eine viel zu hohe Breite (was für eine Wortzusammensetzung) angezeigt wird (s. http://thorr.square7.ch/stundenplan/stud1a.xhtml).

 

[Maik]

Ich hab deinen Code mal zum Vergleich in den gängigen vetretenden Browser geladen, und zur Gegenkontrolle auch zusätzlich eine "heruntergebrochene" Tabelle mit dieser Regel erzeugt:

td, th {
height:40px;
width:100px;
padding:10px;
border:1px solid red;
}

und stelle mit Erstaunen fest, dass hier nicht alle Browser dem w3c-Boxmodell folgen.

Firefox und Opera berücksichtigen überhaupt nicht den vertikalen Innenabstand bei der Höhenbemessung der Elemente, Safari und die IE-Familie hingegen schon.

mfg Maik

 

[ThoRr]

Ich hatte schon über Unterschiede zwischen den Höhenberechnungen der Browser nachgedacht, da ich vor längerer Zeit bei der Anzeige einer etwas anderen Tabelle, die keine quadratischen Zellen beinhaltet, im IE festgestellt habe, dass die Zelle zu hoch war. Aber damit, dass da so gravierende Unterschiede und Fehlinterpretationen bei einer der wichtigsten Eigenschaften eines Elemente herrschen, hätte ich nicht gerechnet und hatte das daher ausgeschlossen.

Da lässt sich dann wohl, denke ich, leider nichts machen. Und ich hatte schon dem IE in die Schuhe geschoben, dass er wieder alles falsch darstellt. Ich werde dann für die Ausdrucke den Opera verwenden - für den IE müsste ich erst alle XHTML-Dateien in HTML "exportieren", da ja sogar der 7er noch so meilenweit hinterher ist, dass er keinen XHTML-Header versteht. Außerdem stellt der IE mir den double-Border zu komisch dar.

Vielen Dank, dass du mir bei dem Problem geholfen hast!