✔ Falsche Darstellung im IE6 (div)

[shio]

Guten Tag.

Ich habe zwar schon mehrere Themen darüber gefunden aber noch nie eine Lösung gefunden.

Folgendes Problem:
Ich habe folgende DIV:

<div id="content">
	
	<div id="left">
		<table class="content">
			<tr><td class="headline">###LINK###</td></tr>
			<tr><td><a href="###IMGLINK###"><img src="bild.jpg" alt="image"/></a></td></tr>
			<tr><td class="headline">###LINK###</td></tr>
			<tr><td><a href="###IMGLINK###"><img src="bild.jpg" alt="image"/></a></td></tr>
		</table>
	</div> <!-- left -->
	
	<div id="right">
		<table class="content">
			<tr><td class="headline">###CURRENTLINK###</td></tr>
			<tr><td class="content">###CURRENT###&nbsp;###CURRENT###</td></tr>
		</table>
	</div> <!-- right -->
	
	<div id="center">
		<table class="content">
			<tr><td class="headline">###LINK###</td><td class="spaceing">&nbsp;</td><td class="headline">###LINK###</td></tr>
			<tr><td><a href="###IMGLINK###"><img src="property.jpg" alt="image"/></a></td><td></td><td><a href="###IMGLINK###"><img src="vehicle.jpg" alt="image"/></a></td></tr>
			<tr><td class="headline">###LINK###</td><td class="spaceing">&nbsp;</td><td class="headline"></td></tr>
			<tr><td><a href="###IMGLINK###"><img src="business.jpg" alt="image"/></a></td><td></td><td></td></tr>
		</table>
	</div> <!-- center -->
	
</div> <!-- content -->

Dazu folgende ccs:

div#content	{	width: 730px;
			background-color: #94B6D6;
			padding-top: 30px;	}

div#left	{	float: left; 
			width: 150px;
			margin: 0;
			padding: 0;
			overflow: hidden;	}

div#right {	float: right; 
		width: 205px;
		margin: 0;
		padding: 0;
		overflow: hidden;	}

div#center {	float: center;
		margin: 0;
		padding: 0;
		overflow: hidden;	}

und für ie dazu

div#content	{	text-align: left; 	}

div#left	{	
			margin-left: 11px;
			margin-right: 4px;	}

div#right {	
		margin-right: 10px; }

div#center	{	
			width: 320px;	}

Das funktioniert im Firefox alles wunderbar. Nur im InternetExplorer 6 (IE7 funktioniert) nicht. Die linke Spalte wird einfach so groß wie die ganze Seit und darunter zeigt er center und left an. Er sollte alles in einer Zeile anzeigen.

Habe schon einige Sachen probiert. Komme aber leider nicht dahinter.

Vielleicht kann mir hier ja jemand helfen. Danke im Voraus.

 

[Maik]

Hi,

scheinbar hast du in den falschen Themen nachgeschlagen, oder aber die Lösung übersehen, denn die Formatierung für die mittlere Spalte bei einem dreispaltigen Layout mit diesem Markup:

<div id="left"></div> 
<div id="right"></div> 
<div id="center"></div>

ist immer die gleiche, und gilt im "Normalfall" für alle Browser:

div#center {
margin:0 205px 0 150px; 
}

Da du aber für die DIVs zusätzlich die overflow-Eigenschaft deklarierst, berechnen nun die modernen Browser gegenüber dem IE6 den Außenabstand anders, weshalb die Regel so lauten muss:

div#center {
margin:0 !important; /* Für moderne Browser */
margin:0 205px 0 150px; /* Für IE6 */
overflow:hidden;
}

Das zusätzliche Stylesheet für den IE

div#content	{	text-align: left; 	}

div#left	{	
			margin-left: 11px;
			margin-right: 4px;	}

div#right {	
		margin-right: 10px; }

div#center	{	
			width: 320px;	}

ist somit überflüssig.

Übrigens, der von dir gesetzte Wert center für die float-Eigenschaft existiert überhaupt nicht, sondern:

• left
• right
• none
• inherit