✔ Problem im IE 6+7

mediaroad · 23. September 2009

Hallo zusammen,

ich habe ein Problem im Internet Explorer 6 und 7. Ich habe einen DIV mit folgenden Angaben

Code:

width:345px;
min-height:306px;
height:auto !important;
height:306px;
float:left;
position:absolute;

Ich will das sich dieser DIV je nach Inhalt verlängert. Das macht er auch in allen Browsern - nur nicht im IE 6 und 7.

Kann es sein, dass er es durch die "position"-Angabe nicht korrekt interpretiert?
Ich habe des öfteren schon Internetseiten programmiert, wo sich der DIV ja nach Inhalt verlängert hat, auch im IE. Da habe ich die gleichen Angaben und Reihenfolgen genutzt, wie ich es auch jetzt habe. Jedoch hatte ich da kein position:absolute;

Jetzt wäre meine Frage, wie bekomme ich es hin, dass er sich trotz der "position"-Angabe mit verlängert.

Ich hoffe man kann mit meiner Erklärung etwas anfangen

Ich würde mich über Lösungsvorschläge freuen und danke schon einmal im voraus.

Maik · 23. September 2009

Hi,

IE6 und IE7 setzen grundsätzlich deinen CSS-Schnipsel für sich alleine betrachtet wie gewünscht um.

Demnach findet sich die Ursache wohl an einer anderen Stelle des Codes.

mfg Maik

mediaroad · 23. September 2009

Danke erstmal für die schnelle Antwort.

Dann habe ich vielleicht irgendwo anders den Fehler. Nur wo?

Hier nochmal mein kompletter CSS Code. Vielleicht gibt das mehr Aufschluss darüber.

Code:

#corpus{
	width:982px;
	min-height:602px;
	height:auto !important;
	height:602px;
	margin:0px auto;
}
#wrapper{
	width:980px;
	min-height:600px;
	height:auto !important;
	height:600px;
	margin-top:10px;
	float:left;
	background-color:#FFFFFF;
	border:1px solid #aaaaaa;
}
#navi_gesamt{
	width:700px;
	height:70px;
	float:left;
}
#navi_rechts{
	width:280px;
	height:70px;
	float:left;
}
#horizontal{
	width:980px;
	height:15px;
	float:left;
}
#main{
	width:980px;
	min-height:490px;
	height:auto !important;
	height:490px;
	float:left;
}
#content_bg{
	width:700px;
	min-height:490px;
	height:auto !important;
	height:490px;
	float:left;
}
#bild_weiss{
	width:250px;
	height:40px;
	z-index:4;
	position:absolute;
	margin:45px 0px 0px 405px;
	border:5px solid #FFFFFF;
	border-bottom:0px;
}
#bild{
	width:250px;
	z-index:3;
	position:absolute;
	margin:45px 0px 0px 405px;
	border:5px solid #EFEFEF;
}
#logo{
	width:700px;
	height:90px;
	float:left;
	background-color:#efefef;
}
#text{
	width:345px;
	min-height:306px;
	height:auto !important;
	height:306px;
	float:left;
	margin:110px 0px 0px 28px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:justify;
	line-height:18px;
	color:#666666;
	z-index:4;
	position:absolute;
}

In #texthabe ich den Inhalt, der sich verlängert.

Maik · 23. September 2009

Den HTML-Code (inkl. Doctype) noch bitte

mfg Maik

Maik · 23. September 2009

Zwischenfrage: Positionierst du hier absolut, um z-index nutzen zu können?

Das funktioniert auch mit einer relativen Positionierung.

mfg Maik

mediaroad · 23. September 2009

Stimmt, das wäre wohl ratsam

Bitteschön...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.7)" />
<meta name="title" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="language" content="deutsch, de" />
<meta name="page-topic" content="" />
<meta name="revisit-after" content="14 days" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="robots" content="index,follow" />
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
	<div id="corpus">
		<div id="wrapper">
			<div id="navi_gesamt"></div>
			<div id="navi_rechts"></div>
			<div id="horizontal"></div>
			<div id="main">
				<div id="content_bg">
					<div id="bild_weiss"></div>
					<div id="bild"></div>
					<div id="text">HIER STEHT DER INHALT</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

mediaroad · 23. September 2009

Mit position:relative; habe ich es auch schon probiert. Vielleicht an der falschen Stelle?! Das Problem ist das der IE das immer so unlogisch interpretiert

Es geht mir hauptsächlich darum, dass ich DIVs im Vordergrund und andere im Hintergrund haben will. Da ist ja die beste Lösung z-index - oder?

lg

Maik · 23. September 2009

Funktioniert bei mir mit position:relative für #text tadellos

Für die gewünschte Schichtpositionierung z-index spielt es keine Rolle, ob das Element absolut oder relativ positioniert ist.

mfg Maik

mediaroad · 23. September 2009

Die Frage wäre wo position:relative; - in dem #text ?

Hier mal ein Screenshot von meinem jetzigen Status. Ich musste das alles ein wenig schwärzen

, aber ich denke es ist sichtbar, dass er den Bereich hinter dem Text nicht verlängert.

lg

Maik · 23. September 2009

Wo sonst, wenn nicht für #text?

Deinen IE6-Screenshot kann ich leider nicht bestätigen. Der ist bei mir mit dem IE7 deckungsgleich.

In meiner Testseite hab ich noch eine kleine Maßkorrektur für IE 6+7 vorgenommen, der IE8 verhält sich hier wie die übrigen Browser:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.7)" />
<meta name="title" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="language" content="deutsch, de" />
<meta name="page-topic" content="" />
<meta name="revisit-after" content="14 days" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="robots" content="index,follow" />

<style type="text/css">
#corpus{
        width:982px;
        min-height:602px;
        height:auto !important;
        height:602px;
        margin:0px auto;
}
#wrapper{
        width:980px;
        min-height:600px;
        height:auto !important;
        height:600px;
        margin-top:10px;
        float:left;
        background-color:#FFFFFF;
        border:1px solid #aaaaaa;
}
#navi_gesamt{
        width:700px;
        height:70px;
        float:left;
}
#navi_rechts{
        width:280px;
        height:70px;
        float:left;
}
#horizontal{
        width:980px;
        height:15px;
        float:left;
}
#main{
        width:980px;
        min-height:490px;
        height:auto !important;
        height:490px;
        float:left;
}
#content_bg{
        width:700px;
        min-height:490px;
        height:auto !important;
        height:490px;
        float:left;
}
#bild_weiss{
        width:250px;
        height:40px;
        z-index:4;
        position:absolute;
        margin:45px 0px 0px 405px;
        border:5px solid #FFFFFF;
        border-bottom:0px;
}
#bild{
        width:250px;
        z-index:3;
        position:absolute;
        margin:45px 0px 0px 405px;
        border:5px solid #EFEFEF;
}
#logo{
        width:700px;
        height:90px;
        float:left;
        background-color:#efefef;
}
#text{
        width:345px;
        min-height:306px;
        height:auto !important;
        height:306px;
        float:left;
        margin:110px 0px 0px 28px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        text-align:justify;
        line-height:18px;
        color:#fff;
        z-index:4;
        position:relative;
        background:#000;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#bild_weiss,#bild{ margin:45px 0px 0px 60px; }
</style>
<![endif]-->

<title></title>
</head>
<body>
<div id="corpus">
                <div id="wrapper">
                        <div id="navi_gesamt">navi_gesamt</div>
                        <div id="navi_rechts">navi_rechts</div>
                        <div id="horizontal">horizontal</div>
                        <div id="main">
                                <div id="content_bg">
                                        <div id="bild_weiss">bild_weiss</div>
                                        <div id="bild">bild</div>
                                        <div id="text">
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             <p>HIER STEHT DER INHALT</p>
                                             - END -
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>

mfg Maik

✔ Problem im IE 6+7

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Maik

Maik

mediaroad

Mitglied

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Anhänge

Maik

Neue Beiträge