Div-Wrapper mit display: table im Internet Explorer

[eXtremous]

Hallo HTML.de Community,

bitte schaut euch doch mal folgende Seite an.
---

In aktuellen Versionen der Browser schaut sie normal aus. Im Internet Explorer unter Version 7 schaut es jedoch so aus:
---

Warum? Ich nehme an es liegt an meinem DIV-Wrapper mit der Eigenschaft display: table. Gibt es eine Alternative, ein Workaround? Was könnte man tun?

Ich hoffe, ich überblickt meinen hoffentlich doch ordentlich geschriebenen Quellcode und könnt mir das Problem mit Lösung erläutern. Ich stehe hier etwas auf dem Schlauch. Danke!

viele Grüße,
Dominik

 

[Tronjer]

Der IE7 kann das nicht, da musst du schon eine andere Lösung finden.

Frage ist, ob und wozu du es überhaupt brauchst. Ich kenne display:table-cell als workaround für die vertikale Zentrierung von Blockelementen.

 

[eXtremous]

Der IE7 kann das nicht, da musst du schon eine andere Lösung finden.

Frage ist, ob und wozu du es überhaupt brauchst. Ich kenne display:table-cell als workaround für die vertikale Zentrierung von Blockelementen.

Ja, das habe ich mir schon gedacht. Kennst du denn eine bessere Möglichkeit, um es zu realisieren? Danke !

 

[Tronjer]

Hängt davon ab, wozu du table-cell überhaupt brauchst. Es gibt sicher einen anderen Ansatz.

 

[threadi]

Ich glaube dir geht es darum, dass die beiden Elemente im Contentbereich die selbe Höhe haben?! Das kann man mittels faux columns erreichen (selbst in IE7 und älter). Schau dich nach diesem Begriff mal um.

 

[eXtremous]

Ich glaube dir geht es darum, dass die beiden Elemente im Contentbereich die selbe Höhe haben?! Das kann man mittels faux columns erreichen (selbst in IE7 und älter). Schau dich nach diesem Begriff mal um.

Daran habe ich auch schon gedacht, und das ganze mit Float realisieren. Jedoch klappt das nicht mit den Border Eigenschaften.

 

[Zejo]

Du könntest auch um menu und content noch einen Div Container "id="wrapper" setzen, und dann floaten, allerdings muss das nachfolgende Element "gecleart" werden, damit der Wrapper menu und content vollständig umschließt.

Quelle: 14.4 Das Problem: Gefloatete Elemente ragen nach unten heraus - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

 

[Tronjer]

Warum nicht so?

$(function() {
	var containerHeight = [];
	$('#menu, #content').each(function() {
		containerHeight.push( $(this).height() );
		$(this).height(containerHeight.sort().slice(-1) );
	});
});

 

[threadi]

Daran habe ich auch schon gedacht, und das ganze mit Float realisieren. Jedoch klappt das nicht mit den Border Eigenschaften.

Einfach nur float zu verwenden ist hier nicht die Lösung. Bitte informiere dich über "faux columns" - da gehört etwas mehr dazu.

Warum nicht so?

Weil JavaScript und insbesondere jQuery nicht immer die "ultimative" Lösung für alles ist ;)

 

[eXtremous]

Hallo,

danke für eure Bemühungen. Habe die Lösung hier gefunden -> Sweet Sin Design | IE hack for display: table-cell

viele Grüße,
Dominik