verschachtelte divs ohne zeilenumbruch [2]

11 Der Gast

Sorry, hatte Rechner dummerweise ausgemacht ;)
Hier, der Rechner ist immer online.

http://zwog.mine.nu/ie6.htm

12 Jörg Kruse

Jetzt hat es geklappt :)

für mich völlig unbegreiflich, denn das gleiche konstrukt funktioniert ja einwandfrei im zweiten container, der die unteren drei kästen enthält!

es ist nicht genau gleich, es enthält noch ein div zum clearen, und genau dies würde auch die Fehlanzeige des IE im oberen Container beheben:

<div id="container2">
        <div id="logo1">
        </div>
        <div id="balkennavi">
        </div>
        <div id="balken">
            <img id="mainlogo" src="pic.gif" alt="logo" />
        </div>
       <div class="clear-left">
        </div>
    </div>

Die Abstände stimmen dann immer noch nicht ganz, das kann man teilweise aber mit einem strictem Doctype korrigieren, welches den IE 6 dazu bewegt, in den standardkonformen Modus zu springen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hi Jörg,

das fehlende clear-left ist mir dann auch noch aufgefallen, allerdings bringt mich das auch nicht viel weiter, denn der Balken darf ja keine width bekommen damit er bei Aufziehen des Browserfensters mit expandiert. Das bewirkt in Safari und Firefox, dass margin-left zu container2 berechnet wird. Damit kann ich gut leben, im IE6 allerdings beginnt der Balken ca. 3px neben dem roten Kasten, was für mich völlig sinnlos ist... Wo kommt dieser 3px Abstand her? (Hab im übrigen einen strict doctype eingefügt)
Wie könnte man das umgehen?
Die absolute Positionierung von bigpic zu container3 funzt im IE6 auch nicht, kann ich mir ebenfalls nicht erklären.

Hab http://zwog.mine.nu/ie6.htm aktualisiert.

14 Jörg Kruse

Könntest du bigpic wie das obere Bild mt float:right positonieren, statt absolut? Damit käme der IE ja zurecht:

#bigpic {
float:right;
width: 389px;
height: 420px;
}

Woher der IE den Abstand von 3px nimmt, kann ich leider grad auch nicht sehen :/

15 wrtlprnft

Schau dir mal diese Seite an. Da geht es auch um diese drei Pixel, nur mit Text. Vielleicht hängt das ja zusammen.

16 Der Gast

Könntest du bigpic wie das obere Bild mt float:right positonieren, statt absolut? Damit käme der IE ja zurecht

Ja, das könnte ich, allerdings darf sich das Bild beim verkleinern nicht unter die drei Kästen schieben.

Habs jetzt mit fürchterlichen Browserhacks hinbekommen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
body {
padding: 0px;
margin: 0px;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
#container {
padding: 15px;
}
#container2 {
position: relative;
margin-top: 15px;
}
#logo1 {
float: left;
height: 88px;
width: 88px;
background-color: #9b8f88;
margin-right: 15px;
}
#balkennavi {
float: left;
height: 88px;
width: 88px;
background-color:#372011;
border: 1px solid red;
}
html>body #balken {  /* für alle richtigen browser */
margin-left: 191px;
height: 88px;
background-color:#372011;
}
#balken { /* für den internet exploiter */
position: relative;
left: -3px;
height: 88px;
background-color:#372011;
}
#mainlogo {
float: right;
}
#container3 {
position: relative;
margin-top: 15px;
}
#logo2 {
float: left;
height: 88px;
width: 88px;
background-color: #372011;
}
#logo3 {
float: left;
margin-left: 15px;
height: 88px;
width: 88px;
background-color: #d7d2cf;
}
#logo4 {
float: left;
margin-left: 15px;
height: 88px;
width: 88px;
background-color: #736358;
}
#bigpic { /* für den internet exploiter */
overflow: visible;
position: absolute;
right: 15px;
top: 0px;
width: 389px;
height: 420px;
}
html>body #bigpic { /* für alle richtigen browser */
overflow: visible;
position: absolute;
right: 0px;
top: 0px;
width: 389px;
height: 420px;
}
</style>
<body>
<div id="container">
<div id="container2">
        <div id="logo1">
        </div>
        <div id="balkennavi">
        </div>
        <div id="balken">
            <img id="mainlogo" src="pic.gif" alt="logo" />
        </div>
        <div class="clear-left">
        </div>
    </div>
    <div id="container3">
        <div id="logo2">
        </div>
        <div id="logo3">
        </div>
        <div id="logo4">
        </div>
       <div id="bigpic">
            <img src="bigpic.gif" alt="rotating"/>
                <div class="clear-right">
                </div>
        </div> 
        <div class="clear-left">
        </div>
    </div>
</div>
</body>

17 Jörg Kruse

@wrtlprnft

gut möglich, dass es sich um den auf Position Is Everything beschriebenen Bug handelt, der Auslöser eines vorangehenden Floats ist ja gegeben

@Der Gast

schön sind solche Hacks nicht, aber ganz ohne geht es wohl in diesem Fall eh nicht

18 DaBASCHT (Gast)

Ich hab das hier so durchgelesen und mir ist aufgefallen, das hier etwas nicht ganz korrekt ist, hier eine ergänzung dazu:

postition:absolute, wird beim InternetExplorer6 immer auf das Elternelement bezogen und nicht auf das nächst übergeordnete absolute, relativ angeordnete oder fixierte Element...

Seite 12

nach oben

verschachtelte divs ohne zeilenumbruch [2]

11 Der Gast

12 Jörg Kruse

13 Der Gast

14 Jörg Kruse

15 wrtlprnft

16 Der Gast

17 Jörg Kruse

18 DaBASCHT (Gast)

Beitrag schreiben (als Gast)

verschachtelte divs ohne zeilenumbruch [2]

Beitrag schreiben (als Gast)

Verwandte Themen