✔ Kompatibilitätsprobleme mit IE

msycho · 11. Februar 2007

Hallo!

Ich tüftel gerade wieder an einem weiteren Grundgerüst.

Kurz zur Erklärung: Die besteht im Prinzip aus drei Teilen: Den Containern head, middle und bottom. Es soll so sein, dass die Container head und bottom im am oberen bzw. unteren Bildschirmrand sitzen und der Container middle dann immer den Rest zwischen den beiden Containern annimmt. Kommt es zu einem höheren Inhalt als Platz da ist, so wird automatisch "geoverflowed".
Im Firefox und Opera funktioniert das einwandfrei, dass sich der Container middle an den Platz anpasst, der ihm je nach Bildschirmauflösung zur Verfügung steht. Der IE macht mir wiederrum einen Strich durch die Rechnung.
Vielleicht habt Ihr einen Tipp für mich, bitte?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<link href="StyleSheetReal.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <div class="head">
        <div class="kopfzeile"></div>
        <div class="banner"></div>  
        <div class="headmenu"></div>
    </div>
    <div class="middle" >
        <div class="menu"></div>
        <div class="middlearea">
        	<!--Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />-->
        </div>
    </div>
    <div class="bottom"></div>

</body>
</html>

Code:

#html
{
	text-align:			center;
	width:				85em;
	height:				100%;
	vertical-align:		middle;
}
.body
{
	text-align:			center;
	background-color:	#ffffff;
	color:				#555555;
	font-family:		Arial, Helvetica, Sans-Serif;
	font-size  :		0.7em;
	margin:				0.3em auto;
	width:				85em;
	overflow:			hidden;
}
.head
{
	text-align:			left;
	width:				85em;		
	height:				20%;		
	position:			absolute;
	top:				0.3em;
}
.middle 
{
	text-align:			left;
	width:				85em;
	margin-bottom:		1em;
	margin-top:			0.5em;
	float:				left;       
	position:           absolute; 
	top:				16em;
	bottom:             1.2em;       
}
.menu	/* Navigation links */
{
	width:				17em;
	height:				100%;
	float:				left;
	margin:				0em 0em 0em 0em;	
	padding:			0em 0em 0em 0em; 
	/** temporäre Erweiterungen **/
	background-color:	#cccccc;
	color:				#555555;
	/** temporäre Erweiterungen **/
}
.middlearea	
{	
	float:				right;
	width:				67.8em;		
	padding-left:		0.1em;
	overflow:			auto;
	height:             100%;
	/** temporäre Erweiterungen **/
	background-color:	#ccc;
	color:				#555555;
	/** temporäre Erweiterungen **/
}
.bottom
{
	width:				84.8em;
	height:				1.3em;
	background-color:	#cccccc;
	border:				solid 0.1em #767676;
	float:				left;
	position:           absolute;
	bottom:             0.3em;
}

Maik · 11. Februar 2007

Hi,

schau dir hierfür mal das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken oder Stu Nicholls' CSS-Layout cross browser fixed header/footer/ centred single column layout an.

msycho · 12. Februar 2007

Also ich habe mir das sehr aufmerksam durchgelesen und das CSS auch verstanden. Nach mehreren Stunden Probieren muss ich allerdings passen. Im IE will der mittlere Bereich einfach nicht variabel in der Höhe sein.
Da muss ich wohl passen. Schade! Dir trotzdem ein Danke für Deine vergebliche Hilfe, michaelsinterface.

Maik · 12. Februar 2007

Hi,

dann zeig doch mal den Quellcode (HTML + CSS), vielleicht hast du ja was übersehen.

msycho · 13. Februar 2007

Also hier das Stylesheet. Wie gesagt, es ist "nur" noch das Problem, dass der mittlere Bereich sich in der Höhe nicht anpasst. Also wenn er höher ist als der verfügbare Platz müsste man ja scrollen - wie im FF und Opera. Im IE läuft er allerdings weiter hinter dem Fuß.

Code:

html
{
	text-align:			center;
	height:				100%;
	vertical-align:		middle;
	max-height:			100%;
	padding:			0; 
	margin:				0; 
	border:				0; 
	overflow:			hidden; 
}

.body
{
	text-align:			center;
	background-color:	#ffffff;
	color:				#555555;
	font-family:		Arial, Helvetica, Sans-Serif;
	font-size  :		0.7em;
	margin:				0.3em auto;
	overflow:			hidden;
}
.head
{
	text-align:			left;
	position:			absolute; 
	margin-left:		-42.5em; 
	left:				50%; 
	top:				0.3em; 
	width:				85em; 
	min-width:			85em; 
	height:				20%; 
	background:			#fff; 
}
.middle 
{
	text-align:			left;
	position:absolute; 
	top:16.5em; 
	bottom:1.2em; 
	width:85em; 
	margin-left:-42.5em; 
	margin-bottom:		1em;
	left:50%; 
}
* html .middle 
{
	top:0; 
	bottom:0; 
	height:100%;
	width:85em;
	border-top:16.5em solid #fff; 
	border-bottom:1.5em solid #fff;
}
.bottom
{
	position:			absolute; 
	margin-left:		-42.4em; 
	left:				50%; 
	bottom:				0.3em; 
	width:				84.8em; 
	min-width:			84.8em; 
	height:				1.3em; 
	border:				solid 0.1em #767676;
	background-color:	#cccccc;
}

Also irgendwo ist bestimmt der Fehler in der Klasse middle.
Das HTML-Gerüst:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<link href="StyleSheetReal.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <div class="middle" >
        <div class="menu"></div>
        <div class="middlearea">
        	<!--Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />-->
        </div>
    <div class="head">
        <div class="kopfzeile"></div>
        <div class="banner"></div>  
        <div class="headmenu"></div>
    </div>
    </div>
    <div class="bottom"></div>

</body>
</html>

Maik · 13. Februar 2007

Hi,

du musst zum einen dafür sorgen, dass der IE im Quirksmodus läuft:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<link href="StyleSheetReal.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <div class="head">
        <div class="kopfzeile"></div>
        <div class="banner"></div>  
        <div class="headmenu"></div>
    </div>
    <div class="middle" >
        <div class="menu"></div>
        <div class="middlearea">
        	<!--Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />Ich bin ein Text.<br />-->
        </div>
    </div>
    <div class="bottom"></div>

</body>
</html>

und zum anderen noch für das DIV .middle die overflow:auto-Eigenschaft deklarieren:

Code:

.middle
{
        text-align:                        left;
        position:absolute;
        top:16.5em;
        bottom:1.2em;
        width:85em;
        margin-left:-42.5em;
        margin-bottom:                1em;
        left:50%;
        overflow: auto;
}

msycho · 13. Februar 2007

Der Quirksmode war's. In den aktuellsten Versionen von Firefox, Opera und IE klappt es nun einwandfrei.
ABER, im IE 6 verhauts die ganze Website und dort ist nichts so wie es sein soll. Liegt das am Quirksmode?

Maik · 13. Februar 2007

Ich kann da keine Unterschiede in der Seitendarstellung zwischen dem IE6 und beispielsweise dem Firefox 2.0 feststellen.

Vielleicht solltest du im HTML-Code die Reihenfolge der DIVs .middle und .head tauschen - vergleiche hierzu mal den Quellcode aus deinem ersten Beitrag, sowie mein letztes Code-Posting.

msycho · 15. Februar 2007

Oh, das war's.

Danke für Deine Hilfe!

✔ Kompatibilitätsprobleme mit IE

msycho

Erfahrenes Mitglied

Maik

msycho

Erfahrenes Mitglied

Maik

msycho

Erfahrenes Mitglied

Maik

msycho

Erfahrenes Mitglied

Maik

msycho

Erfahrenes Mitglied

Neue Beiträge