Tabellenhöhe 100% im IE?

[Elli]

Hi,

ich habe eine Tabelle mit x Zeilen und 2 Spalten. In der ersten Spalte
können sich zwischen 1-3 Zeilen Text befinden. Ergo jede Zeile ist
unterschiedlich hoch. In der 2. Spalte sollen laut Layoutvorgabe Länderkürzel
rein. Es gibt eine obere und untere Reihe (de | en |...), die durch
Trennstriche unterteilt sind. Sprich, das Ganze ist eine weitere Tabelle in
diesem <td>. Gebe ich dieser verschachtelten Tabelle eine height von
100%/vertical-align: middle, dann klappt dies nur im FF, der IE zieht mir
die Tabelle nicht auf die volle Höhe. Die Trennstriche gehen deswegen
nicht ganz bis zum Rand.
Gibt es da ne HTML/CSS Lösung für das Problem oder kann man dem
wirklich nur via JS beikommen?

Danke

Elli

[jayjay]

moin, hast du bisschen code oder nen link dazu? würde gerne es erst sehen.
höhe von 100% würde ich vermeiden, gibt zu viel stress mit...

[MichaG]

Ich tippe spontan auf XHTML-Doctype.
Wenn du den rausnimmst - ja wirklich, man muss aktuelle Standards über Bord werfen, damit der IE funktioniert - sollte alles klappen. Evtl. geht es auch mit einem HTML-Doctype...hab dort nicht weiter nachgeforscht...

[hero-master]

...hab dort nicht weiter nachgeforscht...

Du solltest mal mit deinen Recherchen von ganz vorne anfangen, denn das was du da erzählst macht absolut keinen Sinn und ist schlichtweg falsch

@Elli: Ich denke mal, dass du da nicht zu viel verschachteln solltest/müsstest. Bei den Ländern reicht doch eine Liste (ul) zu verwenden. Das spart Ladezeit, ist übersichtlicher, einfacher und ist semantscih korrekt(er)

[Elli]

Ja, Listen wären sicherlich besser geeigent als verschachtelte Tabellen. Aber soweit
ich das Überblicken kann, bekomme ich auch hiermit mein Höhenproblem nicht gelöst,
weil sich ja auch die LIs entsprechend anpassen müssten, je nachdem, wie viele Zeilen
eben in einem TD drinnen stehen

[hero-master]

Kannst du mal zeigen wie weit du bisher gekommen bist?

[MichaG]

Du solltest mal mit deinen Recherchen von ganz vorne anfangen, denn das was du da erzählst macht absolut keinen Sinn und ist schlichtweg falsch

Och...wenn mir sowas im Arbeitsalltag begegnet, dann ist das nicht unbedingt falsch. Hatte genau das selbe Verhalten - Tabellenlayout mit 100%'iger Höhe. Firefox, Opera und Safari haben es korrekt dargestellt. IE 6-8 nicht. Den Doctype entfernt und schon hat es funktioniert.
Das es kein Sinn ergibt - darüber brauchen wir nicht zu reden. Aber wir sprechen schließlich auch über den IE.

[hero-master]

Hatte genau das selbe Verhalten - Tabellenlayout mit 100%'iger Höhe.

Bei einem Tabellenlayout wäre es sinnvoll den IE in den Quirksmodus zu schicken. Doch 1. wäre dann falsch den Doctype komplett wegzulassen und 2. sehe ich keine Anzeichen, dass es sich um ein Tabellenlayout handelt. Hier geht es bislang nur um 1 einzelne Tabelle

[MichaG]

Ist alles schön und gut - hilft dem Threadsteller aber nicht weiter
Es geht übrigens um verschachtelte - also um mehr als eine einzelne Tabelle

[hero-master]

Ist alles schön und gut - hilft dem Threadsteller aber nicht weiter

Inwiefern nicht? Du meintest sie solle den Doctype weglassen, ich habe dagegen argumentiert und meine Argumente untermauert, damit sie nicht af die Idee kommt den Doctype zu entfernen

Es geht übrigens um verschachtelte - also um mehr als eine einzelne Tabelle

Nicht, wenn sie semantisch korrektes Markup verwendet, zu dem ich ihr auch geraten habe. Außerdem ist eine verschachtelte Tabelle noch lange kein tabellenbasiertes Layout.
Das Problem scheint dennoch zu bestehen, aus dem Grunde warten wir jetzt, bis Elli uns ein wenig Markup zeigt, dann sehen wir weiter

[Elli]

So, hier nun mal etwas Code, anhand dessen ihr seht, was ich meine. In der
2. und 3. Row müssen die Border ganz an den Rand gehen, was sie nicht
tun, da eine height von 100% keine Auswirkung hat.

CSS:

table.test { width: 500px; border: 1px solid #666; background: #eee; border-collapse: collapse; }
			table td { vertical-align: middle; border: 1px solid #fff; }
			table table { height: 100%; text-align: center; border-collapse: collapse; }

HTML (transitional)

<table class="test" width="100%" cellspacing="0">
	  <tr>
		<td>eine Zeile<br />zwei Zeilen</td>
		<td><table width="100%" cellspacing="0">
		  <tr>
			<td>ab</td>
			<td>cd</td>
		  </tr>
		  <tr>
			<td>ef</td>
			<td>gh</td>
		  </tr>
		</table>
		</td>
	  </tr>
	  <tr>
		<td>eine Zeile<br />zwei Zeilen<br />drei Zeilen</td>
		<td>
			<table width="100%" cellspacing="0">
			  <tr>
				<td>ab</td>
				<td>cd</td>
			  </tr>
			  <tr>
				<td>ef</td>
				<td>gh</td>
			  </tr>
			</table>
		</td>
	  </tr>
	  <tr>
		<td>eine Zeile<br />zwei Zeilen<br />drei Zeilen<br />vier Zeilen</td>
		<td>
			<table width="100%" cellspacing="0">
			  <tr>
				<td>ab</td>
				<td>cd</td>
			  </tr>
			  <tr>
				<td>ef</td>
				<td>gh</td>
			  </tr>
			</table>
		</td>
	  </tr>
	</table>

[wildmieze]

hmm .. wenn die zellen immer gleich breit wären, könntest du im faux-columns-stil mit nem hintergrundbild arbeiten .. oder aber, wie schon angedeutet, statt der innen liegenden tabelle was "anderes" verwenden ..

ich meine mich auch zu erinnern, daß tabellen-höhen-angaben im IE generell ein problem sind .. eine dreckige, schnelle lösung ist da wohl tatsächlich das weglassen des doctypes .. ist aber keine "schöne" lösung, und kann auch wieder zu ganz anderen problemen führen ..