• Herkunft: berlin
  • Registrierungsdatum: 11-10-2001
  • Beiträge: 121

Thema: CSS Layout -> Seitenrand IE6 und Main positioniert Footer

Hallo ich habe einproblem bei einem Layer lauyout.

Ich habe einige Layer definiert die ich gerne positionieren möchte..

<div id="frame">
    <div id="wss">wss</div>
    <div id="timer">time</div>
    <div id="container">
        <div id="menue_left"><p>menue_left</p></div>
        <div id="main"><p>main</p></div>
    </div>
    <div id="menue_right"><p>menue_right</p></div>
    <div id="footer">footer</div>
</div>

Das mach ich mit folgendem CSS..

<style type="text/css">
body {
margin: 0;
padding: 0;
}

#frame {
width:955px;
}

#wss {
float:left;
width: 755px;
background:green;
}

#timer {
float:right;
width: 200px;
background:purple;
}

#container {
float:left;
width:755px;

border:0;
margin:0;
padding:0;
}

#menue_left {
float:left;
width:180px;
margin-left:10px;
background:blue;
}

#main {
float:right;
width:555px;
background:silver;
}

#menue_right {
float:right;
width:180px;
margin-right:10px;
margin-left:10px;
background:blue;
}

#footer {
clear:both;
width:955px;
background:yellow;
}
</style>

Ich möchte das Element "menue-left" mit einem linken Rand und rechten Rand versehen.
Da es links angeordnel ist brauch ich hier nur den linken Rand angeben.
Das mache ich mit "margin-left:10px;". Das problem daran! Der ie6 macht nicht 10px sondern 20px Rand wären Firefox das richtig darstellt.

Leider funzt der Boxmodell-Hack nicht mehr im ie6.
Allerdings ist das nicht das ganze Problem.

Ich möchte im HTML den Inhalt der Seite gern vor allen anderen Elementen einfügen können. Das soll heißen .. der Layer mit dem Namen "main" solte eigentlich als erstes definiert werden und dann aber an die selbe Stelle positioniert werden an der er jetzt ist. Das hab ich auch schon alles mit "posotion: absolute;"  geschafft.  Allerdings habe ich auch einen footer der muss sich nach der größe des Main und der beiden Menüs richten und das habe ich nie hinbekommen.

Ich hab schon ne weile gesucht und mir ne Menge angesehen, aber habe das nicht finden können.

Bitte helft mir. Auch Denkansätze oder Teillösungen wären bestimmt sehr hilfreich. Ich bin mit meinen Ideen am ende.

Danke vorab

--> it's funny, how money can change the situations <--

kopfnicka's Webseite

2 Antwort von Flocke

  • Herkunft: Mainz
  • Registrierungsdatum: 11-07-2003
  • Beiträge: 57

Re: CSS Layout -> Seitenrand IE6 und Main positioniert Footer

Für Dien erstes Problem habe ich schonmal eine Lösung, für das zweite derzeit leider keine Zeit :-(

Der IE ist eine Ansammlung von Bugs. Dieser betsht darin, daß bei floatenden Elementen der Wert der Margin, die in Richtung des Floats zeigt, verdoppelt wird. Nun kann man entweder dem Deppen eine eigene Margin geben, oder einen anderen Bug für sich ausnutzen (das mache ich):

Ein floatendes Element ist IMMER ein Blockelement und kann auch durch die display-Eigenschaft nicht zu einem Inline-Element gemacht werden. Doch wenn man  

#menue_left {
float:left;
display: inline /* meine Veränderung*/
width:180px;
margin-left:10px;
background:blue;
}

schreibt, dann ist der ursprüngliche Bug im IE behoben und alle richtigen Browser interessiert es nicht.

HTH,

Jens Grochtdreis

[www.css-faq.de]
[www.grochtdreis.de]     [blog.grochtdreis.de]

Flocke's Webseite

  • Herkunft: berlin
  • Registrierungsdatum: 11-10-2001
  • Beiträge: 121

Re: CSS Layout -> Seitenrand IE6 und Main positioniert Footer

ein Traum, danke.

Wenn das auch ein Bug ist, wie siehts dann mit der späteren Kompatibilität aus. Ich meine wenn eines Tages ie7 fackt ist, muss ich das dann wieder überprüfen, oder ist der Bug von Microsoft diesmal beabsichtigt und soll auch so bleiben.

Hast aber vieleicht ne Idee zu meinem zweiten Prob, dann versuche ich schonmal weiter zu machen.

tausend dank

--> it's funny, how money can change the situations <--

kopfnicka's Webseite