Seite 1 von 1

xhtml/css: Float-Probleme mit IE 7 und Opera 9.1

Verfasst: 14.01.2007, 14:34
von Thies
Hallo,

ich bräuchte Hilfe, da ich nicht weiss, warum der IE 7 und Opera 9.1 mein Layout fehlerhaft darstellen. Das zeigen mir nämlich die Screenshots von Browsershot.org - Link

Die Testseite findet Ihr hier - ich bin aber noch nicht ganz fertig, die meisten Dinge stehen bereits.

Hintergrund zum Problem:
Ich sitze an einem Redesign der Website eines politischen Jugendverbandes und will endlich von Tabellen & Co. auf "vernünftiges" xhtml umstellen. Das klappt auch soweit ganz gut. Es ist ein Drei-Spalten-Layout mit Header, Menue links, Content Mitte und Infoleiste rechts sowie Footer am Ende.

Mit IE 6, FF 1.5 und Opera 8.0 hatte ich das Layout geprüft und es klappt einwandfrei. Aber laut den o.g. Screens haben IE 7 und Opera 9.1 Probleme.

Opera 9.1: https://browsershots.org/screenshots/fa ... 1e9fab436/
IE 7: https://browsershots.org/screenshots/a2 ... 328a865dd/

Wie Ihr sehen könnt, rutscht der Content in der mittleren Spalte nach unten und startet erst, wenn der rechte Container beendet ist.

Der rechte Container wird aufgerufen per

Code: Alles auswählen

<div id="sidebar" class="clearfix">
Der Hauptbereich mit

Code: Alles auswählen

<div id="contentarea" class="clearfix">
Hier die CSS-Definitionen dazu:

Code: Alles auswählen

#sidebar
	&#123;
	float&#58; right;
	width&#58; 200px;
	margin&#58; 0 0 0 10px;
	background&#58; url&#40;../images/bg_container03.gif&#41; transparent repeat-y right top;
	font&#58; 0.85em Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	background-color&#58; transparent ;
	color&#58; #000;
	&#125;

#contentarea
	&#123;
	font&#58; 1.0em Verdana, Arial, sans-serif;
	margin&#58; 15px 185px 0 185px;
	padding&#58; 0 5px 0 0;
	&#125;

/* Cleafix-Hack */
.clearfix&#58;after 
	&#123;
    	content&#58; "."; 
    	display&#58; block; 
    	height&#58; 0; 
    	clear&#58; both; 
    	visibility&#58; hidden;
	&#125;

.clearfix 
	&#123;
	display&#58; inline-table;
	&#125;

/* Hides from IE-mac \*/
* html .clearfix 
	&#123;
	height&#58; 1%;
	&#125;
	
.clearfix 	
	&#123;
	display&#58; block;
	&#125;
/* End hide from IE-mac */
IE 7 kann ich nicht nutzen (ich habe noch WinME auf meinem Rechner) und Opera 9.1. versuche ich gerade herunter zu laden, der Server scheint aber überlastet zu sein.

Kann mir jemand helfen, wo das Problem lokalisiert sein könnte und was ich dagegen tun kann?

Danke im Voraus

Frank-Andre

Verfasst:
von

Hochwertiger Linkaufbau bei ABAKUS:
  • Google-konformer Linkaufbau
  • nachhaltiges Ranking
  • Linkbuilding Angebote zu fairen Preisen
  • internationale Backlinks
Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Verfasst: 15.01.2007, 15:18
von ole1210
Also mein IE7 stellt es richtig dar!

Verfasst: 15.01.2007, 15:29
von Thies
Sorry, hatte heute nacht endlich den Fehler gefunden und vergessen, es hier zu posten :(

Der IE7 hat bei einer Auflösung von 800*600 nicht genügend "Platz" gehabt, ich musste für den IE7 einfach nur 5px weniger Breite rechts und links festlegen, dann ging es:

Code: Alles auswählen

	margin&#58; 15px 190px 0 190px; 
anstelle

Code: Alles auswählen

	margin&#58; 15px 185px 0 185px; 
Bei grösseren Auflösungen als 800*600 kam dieser fehler nicht vor.

CU

Frank-Andre