[CSS] Invertierter IE-Bug?

[Luke]

Komisch, hab statt ner Post-Bestätigung nur ne weiße Seite angezeigt bekommen, und wenn ich den Thread aufrufe, ist auch alles nur weiß. Bitte entschuldigt das Doppel-Posten.


Also, Ich habe da einen Header der aus einem DIV mit einer Tabelle drin besteht. Die Tabelle hat nur eine Zeile und eine Spalte und ist nur da um mir die Möglichkeit des vertical-align zu geben.

<div id="header">
	<table border="0" cellspacing="0" cellpadding="0"><tr><td><h1>Tapetenblog</h1>Straight from the sixties</td></tr></table>
</div>

Das Header DIV soll 807 Pixel breit und 174 hoch sein. Das Tabellenfeld genauso. Zusätzlich hat das Tabellenfeld noch ein padding von 23 (Uh ja!) Pixeln:

#header {
	background: url('images/header.gif') no-repeat;
	width: 807px;
	height: 174px;
}

#header table tr td {
	width: 807px;
	height: 174px;
	padding: 23px;
	text-align: right;
	vertical-align: bottom;
}

Jetzt habe ich das komische Problem dass er es im FF perfekt anzeigt, im IE aber noch das Padding mit auf die Height schlägt. Ich dachte, wenn, sollte es umgekehrt laufen. Es wundert mich auch dass er an der width nichts ändert (sieht in beiden Browsern gleich aus).

Nun gut, ich hab mal den Tantek-Hack versucht:

#header {
	background: url('images/header.gif') no-repeat;
	width: 807px;
	height: 174px;
}

#header table tr td {
	width: 807px;
	height: 128px;
	padding: 23px;
	text-align: right;
	vertical-align: bottom;

	voice-family: "\"}\"";
	voice-family:inherit;
	height: 174px;
}

body>#header table tr td {
	height: 174px;
}

...dann sieht es im FF wider normal (richtig) aus (Table und DIV sind Bündig) und im IE wieder verkackt (genau 46 (=2x23px padding) zu hoch).

Hm...

Luke

[Kropff]

entscheide dich bei #header table mal für eine(!) höhenangabe

gruß
peter

[Luke]

Hm? Ist doch 174px! Bzw, 128px+2*23px=174px

[Kropff]

#header table tr td {
    width: 807px;
    height: 128px;
    padding: 23px;
    text-align: right;
    vertical-align: bottom;
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 174px;
} 

und jetzt zähl mal, wie oft da height vorkommt.

peter

[Luke]

2 mal, aber meines wissens werden 'normale' Browser nur die letzte Eigenschaft lesen, während der IE an der stelle bei voice-family: "\"}\""; denkt es sei zu ende und die erste Höhenangebe benutzt. Tantek-Hack

[Kropff]

upsi, übersehen. sorry. also der ie zählt das das padding zur höhe hinzu. ff und opera nicht. tipp, arbeite mit conditional comments und leg die ie-eigenarten in eine separate css-datei. da brauchst die ganzen hacks nicht.

du könntest ggf. bei td mit display: block arbeiten, kann ich aber nicht zu sagen, da ich seit jahren nicht mehr mit layout-tabellen arbeite.

gruß
peter

[wahsaga]

Original geschrieben von Kropff
also der ie zählt das das padding zur höhe hinzu. ff und opera nicht.

Nö, umgekehrt.


Und der IE macht es falsch, wenn er sich im Quirks Mode befindet.

[Luke]

Ja gut, 'gefixt' hab ich's jetzt indem ich dem DIV das padding gegeben hab, da funktioniert auch der Tantek-Hack

[Kropff]

Original geschrieben von wahsaga
Nö, umgekehrt.
Und der IE macht es falsch, wenn er sich im Quirks Mode befindet.

Nö umgekehrt.

habs per screenshot getestet. im ff und opera liegt die höhe bei 128px, im ie 6 und 7 bei 174px. (xhtml 1.0 trans.)

#header table tr td 
{
    width: 807px;
    height: 128px;
    padding: 23px;
    text-align: right;
    vertical-align: bottom;
    background-color: #f00;
} 

peter

[wahsaga]

Original geschrieben von Kropff
Nö umgekehrt.

habs per screenshot getestet. im ff und opera liegt die höhe bei 128px, im ie 6 und 7 bei 174px. (xhtml 1.0 trans.)

Da mag eventuell ein Spezialfall vorliegen, weil du es auf eine Tabellenzelle anwendest - noch zusätzliche Formatierungen, Default-Formatierungen für Tabellenelemente, was weiss ich.

Aber normalerweise wird padding zur width/height dazuaddiert.

[Kropff]

Aber normalerweise wird padding zur width/height dazuaddiert.

OffTopic:

---

weiss ich. aber hier nicht

---

peter