✔ Anordnung von DIV-Boxen im IE falsch - bei FF, Safari, Opra kein Problem

dwex · 17. August 2010

Anordnung von DIV-Boxen im IE6 / IE7 falsch - bei FF, Safari, Opra, IE8 kein Problem

Hallo Leute,

ich muss ein komplexes Layout umsetzen und habe bereits folgendes gecoded.

Das HTML-File:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="template.css" media="screen,projection" />

</head>
<body>


<div id="kasten" class="clearfix">

    <div id="linkespalte">
    	asdf

    </div>

	<div id="header1">
		sdfg<br>sdfg
	</div>
	
	<div id="kasten2">
        <div id="tr2">
            sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>
        </div>
        <div id="tr3">
            sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>sdfg<br>
        </div>
	</div>
	
	<div id="content">
		sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg 
		
	</div>


</div>



</body>

Das CSS-File:

Code:

body {
	/*background-color:silver;*/
	font-family: Verdana, Arial, sans-serif;
	margin:0;
	padding:0;
	
	background: url(body_bg.jpg) repeat-y fixed center top;
}


#kasten {
	width:950px;
	margin: 0px auto;
	text-align: left;
	background-color:yellow;
	position:relative;
}


#linkespalte {
	width: 170px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:silver;
	text-align:center;
	min-height: 450px;
}

#header1 {
	width: 780px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:blue;
	text-align:center;
}

#kasten2 {
	width: 780px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:red;
	text-align:center;
}



#tr2 {
	width: 780px;
	/*margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;*/
	float:left;
	position:relative;
	background-color:green;
	/*text-align:center;*/
	z-index:1;

}
#tr3 {
	/*width: 700px;
	margin-top:0px;
	margin-left: 200px;
	margin-right: 0px;*/
	float:right;
	margin-left: 650px;
	margin-top: 20px;
	position:absolute;
	background-color:red;
	width: 130px;
	/*text-align:center;*/
	z-index:2;

}

#content {
	width: 650px;
	background-color:fuchsia;
	float:left;
	position:relative;
}

Die Anordung der Boxen soll so sein wie im Dateianhang "so_soll_es_sein.jpg". Das ist die Darstellung im FF, Safari und Opra sowie im IE8.
Im IE7 und IE6 wird es dargestellt wie im Dateianhang "so_soll_es_NICHT_sein.jpg" - also die rote DIV-Box verschwindet.

Folgendes ist mir gerade noch aufgefallen. Die rote DIV-Box liegt 650px rechts des rechten Endes des Layouts also quasi total ausserhalb. Daraufhin habe ich #tr3 um top:0px; und left:0px; ergänzt. Jetzt scheint es im IE7 zu funktionieren. Jedoch der IE6 weigert sich beharlicht!

Kann mir bitte jemand auf die Sprünge helfen was ich falsch mache?
Vielen Dank für euere Hilfe im Voraus!

SpiceLab · 17. August 2010

Wenn #tr2 und #tr3 sich umfliessen sollen, kann demnach #tr2 nicht so breit dimensioniert sein, wie deren Mutterbox #kasten2. Für #content hast du doch auch die korrekte Breite festgelegt.

IE6 kennt die min-height-Eigenschaft nicht, was in ihm zur Folge hat, dass #linkespalte nur so hoch dargestellt wird, wie es der Inhalt vorgibt, und beim enthaltenen "Einzeiler" die Blöcke #kasten2 und #content unterhalb an den linken Rand von #kasten rutschen.

Versuch's mal mit diesem CSS:

CSS:

#linkespalte {
    width: 170px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:silver;
    text-align:center;
    min-height: 450px;
    height:auto !important;
    height:450px;
}

#header1 {
    width: 780px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:blue;
    text-align:center;
}

#kasten2 {
    width: 780px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:red;
    text-align:center;
}

#tr2 {
    width: 650px;
    float:left;
    position:relative;
    background-color:green;
    z-index:1;
}

#tr3 {
    float:right;
    margin-top: 20px;
    position:absolute;
    right:0;
    background-color:red;
    width: 130px;
    z-index:2;
}

#content {
    width: 650px;
    background-color:fuchsia;
    float:left;
    position:relative;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

dwex · 17. August 2010

spicelab hat gesagt.:
Wenn #tr2 und #tr3 sich umfliessen sollen, kann demnach #tr2 nicht so breit dimensioniert sein, wie deren Mutterbox #kasten2. Für #content hast du doch auch die korrekte Breite festgelegt.

IE6 kennt die min-height-Eigenschaft nicht, was in ihm zur Folge hat, dass #linkespalte nur so hoch dargestellt wird, wie es der Inhalt vorgibt, und somit #kasten2 ganz nach links rutscht.

Hallo,

#tr2 soll so breit sein, da hier ein bild eingefügt werden soll welches hinter #tr3 verschwinden soll. Nur eben der obere Rand des Bildes (20px oder so - das ist eben der grüne Balken über #tr3) sollen noch angezeigt werden. Es soll also nicht umfliesen sonder überlagern.

Ich habe min-height nur gesetzt damit ich in #linkespalte keinen Inhalt stehen haben muss um eben das Problem wie du es geschildert hast mit dem #kasten2 nicht zu haben. Im Quelltext habe ich leider nicht mehr als eine Zeile eingefügt das habe ich aber bereits nachgeholt. Nachfolgend der aktuelle Quelltext
Da der Inhalt in #linkespalte sowieso sehr lange ist (also sicher über den Beginn von #kasten2 geht) kann ich das verschieben des #kasten2 vernachlässigen.

Folgendes ist mir noch aufgefallen. Die rote DIV-Box liegt 650px rechts des rechten Endes des Layouts also quasi total ausserhalb. Daraufhin habe ich #tr3 um top:0px; und left:0px; ergänzt. Jetzt scheint es im IE7 zu funktionieren. Jedoch der IE6 weigert sich beharlicht!

Hier der aktuelle Quellcode:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="template.css" media="screen,projection" />
	<title>test</title>
</head>
<body>


<div id="kasten" class="clearfix">

    <div id="linkespalte">
    	asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />

    </div>

	<div id="header1">
		sdfg<br />sdfg
	</div>

	<div id="kasten2">
        <div id="tr2">
            sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />
        </div>
        <div id="tr3">
            sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />sdfg<br />
        </div>
	</div>

	<div id="content">
		sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg
	</div>


</div>



</body>
</html>

Hier das aktuelle CSS:

Code:

body {
	/*background-color:silver;*/
	font-family: Verdana, Arial, sans-serif;
	margin:0;
	padding:0;

	background: url(body_bg.jpg) repeat-y fixed center top;
}


#kasten {
	width:950px;
	margin: 0px auto;
	text-align: left;
	background-color:yellow;
	position:relative;
}


#linkespalte {
	width: 170px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:silver;
	text-align:center;
	min-height: 450px;
}

#header1 {
	width: 780px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:blue;
	text-align:center;
}

#kasten2 {
	width: 780px;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	float:left;
	position:relative;
	background-color:red;
	text-align:center;
}



#tr2 {
	width: 780px;
	/*margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;*/
	float:left;
	position:relative;
	background-color:green;
	background: url(bg_infobox_gross.jpg);
	/*text-align:center;*/
	z-index:1;

}
#tr3 {
	/*width: 700px;
	margin-top:0px;
	margin-left: 200px;
	margin-right: 0px;*/
	top:0px;
	left:0px;

	float:left;
	margin-left: 650px;
	margin-top: 20px;
	position:absolute;
	background-color:red;
	width: 130px;
	/*text-align:center;*/
	z-index:2;

}

#content {
	width: 650px;
	background-color:fuchsia;
	float:left;
	position:relative;
}



.clear_both {
	clear: both;
}

SpiceLab · 17. August 2010

Da #tr2 und #tr3 sich überhaupt nicht umfliessen sollen, lautet meine geänderte Fassung von eben nun so:

CSS:

#kasten {
    width:950px;
    margin: 0px auto;
    text-align: left;
    background-color:yellow;
    position:relative;
}

#linkespalte {
    width: 170px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:silver;
    text-align:center;
    min-height: 450px;
    height:auto !important;
    height:450px;
}

#header1 {
    width: 780px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:blue;
    text-align:center;
}

#kasten2 {
    width: 780px;
    margin-top:0px;
    margin-left: 0px;
    margin-right: 0px;
    float:left;
    position:relative;
    background-color:red;
    text-align:center;
}

#tr2 {
    width: 780px;
    position:relative;
    background-color:green;
    z-index:1;

}

#tr3 {
    top: 20px;
    position:absolute;
    right:0;
    background-color:red;
    width: 130px;
    z-index:2;
}

#content {
    width: 650px;
    background-color:fuchsia;
    float:left;
    position:relative;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

... und funktioniert reibungslos im IE6.

dwex · 17. August 2010

Hallo spicelab,

vielen dank für die Hilfe - jetzt passt es perfekt!
Vielleicht lerne ich es ja doch noch

✔ Anordnung von DIV-Boxen im IE falsch - bei FF, Safari, Opra kein Problem

dwex

Erfahrenes Mitglied

Anhänge

SpiceLab

ZENmechanic

dwex

Erfahrenes Mitglied

SpiceLab

ZENmechanic

dwex

Erfahrenes Mitglied

Neue Beiträge