CSS Layout probleme

[Lukas Schaufler]

Hallo!

Ich kämpfe gerade mit einem CSS Layout in Verbindung mir PHPWCMS.

Der IE macht mir einen Abstand zwischen dem "Left Block" und dem "Main Block", der sich dadurch auf die Gesamtbreite des Dokuments auswirkt (Main Block steht rechts zu weit außen) - bei FF passt es...

Leider komme ich nicht darauf, was diesen Darstellungsfehler bzw. diese Darstellung hervorruft?!?

Weiters habe ich so meine Probleme mit dem zentrieren vom DIV mit der ID "Container" - obwohl margin auf "0px auto" steht wird die Seite im Viewport mit ca. 5px oben und links dargestellt...

Ich würde mich freuen, wenn mir jemand mit einem Stoss in die richtige Richtung helfen könnte...

CSS (verkürzt):

#container {
 border: none;
 margin: 0px auto;
 padding: 0px;
 width: 780px;
}

#headerBlock {
        margin: 0px;
 padding: 0px;
 width: 780px;
 display: block;
}

#mainBlock {
 background-attachment: scroll;
 background-image:      url(../../img/Schwarzer_Verlauf_Leiste_ob.gif);
 background-repeat: repeat-x;
 height: 370px;
 width: 605px;
 margin: 0px;
 padding: 0px;
 overflow: auto;
}

#leftBlock {
 background-image: url(../../img/Leiste_links_Muster.gif);
 background-repeat: repeat-y;
 height: 370px;
 width: 175px;
 margin: 0px;
 padding: 0px;
 float: left;
 overflow: auto;
}

#footerBlock {
 background-color: #FF9933;
 background-image: url(../../img/Leiste_unten_Muster.gif);
 background-repeat: repeat-x;
 color: #FFFFFF;
 height: 19px;
 padding-top: 9px;
 text-align: center;
 width: 780px;
}

HTML Ausgabe aus PHPWCMS (Schema):

<div id="container">
    <div id="headerBlock">
        INHALT HEADERBLOCK
    </div>
    <div id="leftBlock">
        INHALT LEFTBLOCK
    </div>
    <div id="mainBlock">
        INHALT MAINBLOCK
    </div>
    <div id="footerBlock">
        INHALT FOOTERBLOCK
    </div>
</div>

Konkret kann man die Seite mit dem Problem unter folgender URL einsehen:
http://www.awc-vienna.com/index.php?id=0,1,0,0,1,0

Danke & Lg.

[frankx]

Hellihello
wie wärs mit conditional comments:

  
<!--[if IE gte 5]>  
<style type="text/css">  
 body{border:1px solid blue;  
 width:100%;  
 text-align:center}  
 #container {text-align:left;}  
</style>  
<![endif]-->  

frankx

[Lukas Schaufler]

wie wärs mit conditional comments:

Danke - habe ich eingebaut!
Im IE 5 hätte sich das Problem der zentrierung somit gelöst...
...IE6 und FF müssen noch motiviert werden *g*

Danke & Lg.

[frankx]

Hellihello

wieso, der IE versteht conditional comments immer, du kannst als version auch größer 5 angeben oder so.

Gruß,

frankx

[Gernot Back]

Hallo Lukas,

Konkret kann man die Seite mit dem Problem unter folgender URL einsehen:
http://www.awc-vienna.com/index.php?id=0,1,0,0,1,0

Lass doch einfach auch deinen "mainBlock" floaten!

Gruß Gernot

[Lukas Schaufler]

Lass doch einfach auch deinen "mainBlock" floaten!

Danke für diesen Tipp!
Nachdem ich den mainBlock und den footerBlock gefloatet habe bauen sich die Seiten in beiden Browsern ident auf!

Zwar wollen diese sich noch immer nicht zentriert zeigen, aber ein ganz großes Stück näher am gewünschten Ergebniss!!!

Danke & Lg.

[Gernot Back]

Hallo Lukas,

Zwar wollen diese sich noch immer nicht zentriert zeigen, aber ein ganz großes Stück näher am gewünschten Ergebniss!!!

Um dein Ergebnis zu komplettieren, findest du die Antwort auf die Zentrierungsfrage in diesem aktuellen Thread.

Gruß Gernot