IE und left/right

[Jesterfox]

Hi,

ich versuche gerade ein mehrspaltiges Layout mit position:absolute hinzubekommen.

Ansatz:
body{
     margin:0px;
     padding:0px;
}
#menu{
 position:absolute;
 left:10px;
 top:120px;
 width:150px;
}
#content{
 position:absolute;
 top:80px;
 right:160px;
 left:170px;
 border-right:solid 1px red;
 border-collapse:collapse;
 padding:10px;
 margin:0px;
}
#extra{
 position:absolute;
 right:0px;
 width:140px;
 top:80px;
 border-left:solid 1px white;
 border-collapse:collapse;
 padding:10px;
 margin:0px;
}
#header{
 height:70px;
 text-align:center;
}

Problem:

die Linien zwischen den 2. und 3. DIV überdecken sich beim IE je nach Fensterbreite nicht, er scheint die Positionierung nicht Pixelgenau vorzunehmen sondern ein Raster anzuwenden. Ist irgendetwas darüber bekannt und gibts eine Lösung?

Zugehöriges HTML:
(Doctype ist HTML 4.01 Strict)

<div id="menu">
            <ul id="nav">
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
            </ul>
        </div>
        <div id="header">
         <h1>Überschrift</h1>
        </div>
        <div id="content">
        Ein paar Zeilen mit Text, damit man auch etwas sieht.
        ...
        <div id="extra">
        Ein paar Zeilen mit Text, damit man auch etwas sieht.
        ...
        </div>

Gruß,

Harlequin

[Martin Hölter]

Hi!

#content{
position:absolute;
top:80px;
right:160px;
left:170px;
border-right:solid 1px red;
border-collapse:collapse;
padding:10px;
margin:0px;
}

Hier ist das Problem. Der IE kann nicht aus den left/right-Angaben die Breite des Elementes berechnen.

Gruß aus Iserlohn

Martin

[Harlequin]

Hi,

Hier ist das Problem. Der IE kann nicht aus den left/right-Angaben die Breite des Elementes berechnen.

Wie breit macht er das Element, wenn ich left weglasse? Falls er es auf die maximal mögliche Breite zieht würde doch ein margin-left das gleiche bewirken, oder? Ich kann es im Moment leider nicht testen.

Gruß,

Harlequin

[Harlequin]

Ok, ich antworte hier mal selbst, da ich es gerade ausprobiert habe:

Wie breit macht er das Element, wenn ich left weglasse?

Er macht es nur so breit wie notwendig, es muss eine Breite angegeben werden. das ist aber nur mit %-Angaben möglich.

Ergebnis:

#content{
 position:absolute;
 top:80px;
 right:20%;
 margin-left:170px;
 width:80%;
 border-right:solid 1px red;
 border-collapse:collapse;
 padding:0px;
 margin:0px;
}
#content div{
margin-left:170px;
padding:10px;
}
#extra{
 position:absolute;
 right:0px;
 width:20%;
 top:80px;
 border-left:solid 1px black;
 border-collapse:collapse;
 padding:0px;
 margin:0px;
}
#extra div
{
padding:10px;
}

Und extra DIVs in content und extra führen im Prinzip zum gewünschten Ergebnis. Einziger unterschied ist, dass die rechte Spalte nun keine feste sondern eine prozentuale Breite hat. Die extra DIVs sind notwendig, damit Margin und Padding funktioniert (ich hasse das CSS-Box-Modell...).

Ist das der Königsweg oder hat jemand noch andere Vorschläge?

Gruß,

Harlequin