Pixelgenaue Ausrichtung von Div - IE 6

[sandro]

Hallo,

ich bitte um eure Hilfe, nach dem ich Tutorials, Erklärungen und Forensuche durch hab - aber irgendwie komme ich nicht auf einen grünen Zweig. Bin halt auch noch Anfänger ;-) Vermutlich ist es für Wissende eine Kleinigkeit und wahrscheinlich schon tausendmal behandelt. Aber ich sehe vor lauter Bäumen den Wald nicht mehr ;-).

Zum Thema:

Ich habe eine Seite gemacht mit Header, Leftbar, Rightbar und Footer. Da jeweils ein Hintergrundbild hinterlegt ist, muss alles Pixelgenau zusammen passen.

Siehe http://www.battistin.com/start/start.html

In Modernen Browsern wird auch alles richtig angezeigt. Aber beim Internet Explorer 6 (ältere weiß ich nicht)verschiebt es den Content (im Moment nur Div mit Hintergrund schwarz) unterhalb der Linken und rechten Rahmen. Verkleinere ich den Content in der Breite, rutscht er auf den richtigen Platz - aber hat links und rechts einen Rand zu den Rahmen. Ich hoffe ich erkläre es deutlich genug :-)

Würde mich über eine kleine Hilfe sehr freuen.

Gruß Sandro

Hier noch die CSS Datei:

body {background-color: #cc6633;}

img, div {
behavior: url(iepngfix.htc);
}

#container {
position:relative;
left:50%;
margin-left:-395px;
width:790px;
height:100%;}

#header {
 width:790px;
 height:47px;
 background:url(bilder/header.png) no-repeat;
 }

#leftbar {
 float:left;
 height:534px;
 width:26px;
 Background-image:url(bilder/leftbar.png);
 background-repeat:no-repeat;
 }
#rightbar {
 float:right;
 width:24px;
 height:534px;
 Background-image:url(bilder/rightbar.png);
 background-repeat:no-repeat;
 }
#footer
 {
 clear:both;
 height:19px;
 background-image:url(bilder/footer.png);
 background-repeat: no-repeat;
 }

#content_index {
position:relative;
margin-top:0px;
margin-left:26px;
margin-bottom:0px;
width:740px;
height:534px;
background-color: #141416;}

[Bobby]

Moin

Der IE 6 kommt mit deiner Seiteaufteilung nicht klar.

Setze die Divs in die richtige Reihenfolge:
  <div id="header"></div>
  <div id="leftbar"></div>
  <div id="content_index"> </div>
  <div id="rightbar"></div>
  <div id="footer"></div>

und gib den 3 mittleren Div ein float left. Dann klappts auch mit dem IE 6.

Übrigens kann auch dein restliches CSS sauberer gestaltet werden. z.B. wenn du dem Body text-align:center und dem Container margin:auto gibst, wird dieser ebenfalls zentriert. Dann brauchst du die Margin-left und lef-Angabe nicht.

Außerdem kann man Background-Eigenschaften zusammenfassen:
background:url() no-repeat usw.

Gruß Bobby

[Sandro]

Super. Vielen lieben Dank :-)

Die Ergänzungen werde ich gerne übernehmen.

gruß Sandro