✔ Problem im IE 6+7

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
 
Sagst du mir bitte, wo der IE hier etwas verzieht und verschiebt?

Diesmal der IE6 in Aktion:

ie6_1.jpg ie6_2.jpg

Und zum Gegenvergleich die Seitenansicht im FF:

ff.jpg

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
 
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;
        display:inline;
}


mfg Maik
 
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 hat gesagt.:
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.
Zum Vergrößern anklicken....
Dann mußt du hier nochmal Hand anlegen :-)
HTML: 
<!--[if lt IE 8]>
<style type="text/css">
#bild_weiss,#bild{ margin:45px 0px 0px 60px; }
</style>
<![endif]-->


mfg Maik
 
<!--[if lt IE 8]>
<style type="text/css">
#bild_weiss,#bild{ margin:45px 0px 0px 60px; }
</style>
<![endif]-->
Zum Vergrößern anklicken....

Also ich habe deinen o.g. CODE genutzt. Mit den Angaben hat es aber bei mir nicht funktioniert. D.h. ich musste leider ein wenig tricksen - ich habe nun negative margin-Angaben machen müssen. Nun sitzt es auch wie ich will.

Ist nicht die beste Lösung, aber erstmal funktioniert es ;)

Danke nochmal für deine Hilfe.

Lg und einen schönen Tag
 
Also ich hab hier nichts mit negativen margin-Werten zurechtbiegen müssen:
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;
        display:inline;
}
</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>


Wie sich die Seite mit diesem Code bei mir im IE6 darstellt, siehst du ja in Post #12.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück