Problem im IE 6+7 @ tutorials.de: Tutorials, Forum & Hilfe

mediaroad · 23.09.09 13:09

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.09.09 13:13

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.09.09 13:42

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.09.09 13:45

Den HTML-Code (inkl. Doctype) noch bitte

mfg Maik

Maik · 23.09.09 13:53

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

Das funktioniert auch mit einer relativen Positionierung.

mfg Maik

mediaroad · 23.09.09 13:56

Stimmt, das wäre wohl ratsam

Bitteschön...

HTML-Code:

<!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.09.09 14:03

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.09.09 14:08

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.09.09 14:34

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.09.09 14:43

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-Code:

<!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

mediaroad · 23.09.09 14:58

Ich habe es nun probiert mit position:relative; leider funktioniert es bei mir nicht wirklich. Es ist sogar noch schlimmer wie vorher - er verzieht die komplette Seite bzw. verschiebt alle DIVs.
Etwas positives ist aber - er verlängert den DIV. Aber das bringt mir nicht viel wenn er die Seite crashed.

Ich weiß echt nicht mehr weiter. Irgendwo muss in meinem Script ein Fehler sein, die Frage ist nur wo?!

lg

Maik · 23.09.09 15:06

Sagst du mir bitte, wo der IE hier etwas verzieht und verschiebt?

Diesmal der IE6 in Aktion:

Und zum Gegenvergleich die Seitenansicht im FF:

Ansonsten hast du doch die Möglichkeit, wie von mir in der Testseite für #bild_weiss u. #bild ansatzweise angewendet, mittels eines Conditional Comments falsch interpretierte Außenabstände zu korrigieren.

mfg Maik

Maik · 23.09.09 15:20

Okay, mir ist eben garnicht aufgefallen, dass sich im IE6 nun sein "Doubled Float-Margin Bug" bei #text bemerkbar macht, indem er den linken Außenabstand verdoppelt.

Lösung:

Code :

#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;
        [B]display:inline;[/B]
}

mfg Maik

mediaroad · 23.09.09 15:49

Ok, also ich habe meine CSS nun komplett neu aufgesetzt mit all deinen Angaben als Grundlage. Nun funktioniert und sieht auch alles in allen Browsern gut aus und auch fast perfekt im IE 6+7. Da setzt er nun nur noch #bild und #bild_weiss mit einem extremen Abstand nach unten und links.

Lg und ich danke dir echt für deine Hilfe - hab vor lauter Bäumen den Wald nicht mehr gesehen

mediaroad · 23.09.09 15:51

Sorry, wollte eigentlich noch die Screenshots anhängen

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

[IE7 Problem] Problem mit ul/li Höhen im IE7 bei Verwendung eines vertikalen Menüs

Problem: Flash MX (7.1) exportiert meine Fla nicht mehr - dringendes Problem

Problem mit hover- background ändern & Problem bei Reload

PROBLEM! Pinnacle 2 GB Begrenzung Windows 2000 DC 50 PROBLEM!

Problem mit PopUp (Ja ich weiss Suche benutzten, hab ein ganz anderes Problem)

E-Mail:

Abonnieren Abbestellen