CSS problem mit IE - Firefox in Ordnung...

[andre160880]

Hallo,

habe jetzt schon den ganzen Tag gegoogelt und Lösungen gesucht... Ich hoffe, dass mir hier jemand weiter helfen kann.

Ich habe mir mit css ein Template erstellt und das ganze hat soweit auch ganz gut mit Firefox funktioniert. Nur als ich meine Seite im IE aufgerufen habe, musste ich feststellen, dass es da nicht richtig angezeigt wird. Im Firefox sitzt meine Seite in der mitte wie es von mir auch gedacht ist. Im IE allerdings zieht sich die Seite über die gesamte breite des Browsers.

Denke das ganze liegt am float left bzw. right... vermute mal über Firefox wird das ganze im css mit body {width: 1000px} begrenzt, allerdings ignoriert er dies wohl im IE. Habe schon eine ganze Menge jetzt über IE-Hacks und Conditional Comments gelesen, aber irgendwie blicke ich da nicht richtig durch.

Hier mal ein Link zu dem erstellten Layout http://cofusion.de/layout.html

Hat hier jemand eine Lösung, dass er es auch im IE wie bei Firefox anzeigt? Bin dankbar für jede Hilfe!

Grüße Andre

[threadi]

Dein Quellcode ist schon vom Grundaufbau her falsch. Da fehlt z.B. ein Doctype, der für eine einheitliche Interpretation des HTML- und CSS-Codes sorgen würde. Beseitige erst die Fehler, wenn dann noch Probleme bestehen kann man weiterschauen.

http://validator.w3.org/check?verbos...%2Flayout.html

[andre160880]

Hallo,

erstmal danke für die schnelle Antwort. Die Seite hatte ich nur zur Veranschaulichung schnell zusammengestellt - daher wohl die Flüchtigkeitsfehler. Allerdings jetzt nach der Validierung scheint es auch zu klappen THX! Sollte mal besser auf den sauberen Aufbau achten....

Grüße
Andre

[andre160880]

Hallo

nachdem die Fehler beseitigt sind läuft das mit der css ja ganz gut soweit. Jetzt habe ich allerdings festgestellt, sobald ich das Browserfenster verkleinere auf weniger als 1000px, kann ich nicht weiter nach links scrollen. Das passiert beim FF genauso wie beim IE... Hat da jemand eine Idee, wie das zu lösen ist?

Grüße Andre

[threadi]

Verzichte auf den absolut positionierten body. Mit sowas solltest Du sparsam umgehen und auch wissen was du tust.

[andre160880]

Geht ja echt super schnell mit den Antworten hier

Habe im Body ja folgendes angegeben um die Seite zu zentrieren:

body {
text-align : center;
margin : 0 0 0 0;
color : #ffffff;
background : #000000;
padding : 0;
position: absolute;
width: 1000px;
left: 50%;
margin-left: -500px;
}

Allerdings wenn ich position ablolute rausnehme, wird die Seite auch nur noch zu 50% angezeigt - bzw. es verschiebt sich eben alles um die 500px nach links. Wenn ich left 50% und margin-left -500px auch noch rausnehme, ist die Seite nicht mehr zentriert sondern komplett auf der linken Seite.

[threadi]

Aus dem Grund würde ich empfehlen die Seite nicht über den Body sondern über ein umliegendes div zu zentrieren. Dieses sollte den gesamten Content umgeben und mit "width" und "margin: 0 auto;" in die Mitte gebracht werden.

[wildmieze]

Ich häng mich mal hier an - ich hab da ne Frage zu nem ähnlichen "Problem". Ist bisher aber nur theoretisch, hab da noch nix ausprobiert^^

Aaalso. Ich habe ein div mit fester Höhe und Breite, das sowohl horizontal als auch vertikal zentriert angezeigt werden soll:
Wenn ich dazu grob googele, finde ich auch immer diese "-50%"-Lösung. Mit dem entsprechenden Scrollproblem.
Gibt es da mittlerweile einen anderen "Standard"?
Horizontal ist mit margin: 0 auto; ja kein Thema, aber vertikal .. *grübel*

[threadi]

Vertikale Zentrierung ist (noch) etwas schwierig. Eine passable Lösung ist es jedoch die Elemente per CSS zu Tabellen zu machen ("display: table-cell;") und die Inhalte darin vertikal auszurichten. Geht "natürlich" im IE nicht - für den musst Du dann die von dir angesprochene "-50%-Variante" verwenden. Siehe auch:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

[wildmieze]

Ok, danke .. so werd ichs dann wohl machen ..

[andre160880]

threadi

Aus dem Grund würde ich empfehlen die Seite nicht über den Body sondern über ein umliegendes div zu zentrieren. Dieses sollte den gesamten Content umgeben und mit "width" und "margin: 0 auto;" in die Mitte gebracht werden.

Danke für deine Hilfe threadi, allerdings war mir deine Lösung etwas zu aufwendig, da ich bei dem bestehenden Projekt an die 1000 Sites ändern müsste um nochmal ein div um den gesamten Content zu legen.... Hab es jetzt so mit im Body gelöst:

body {
text-align : center; //für den IE
margin: 0 auto; //für alle anderen Browser
color : #ffffff;
background : #000000;
padding : 0;
width: 1000px;
}

[hero-master]

Ist auch die bessere Lösung. Man sollte immer Tags einsparen, wenn man kann und es Sinn macht
Das text-align: center kannst du dir aber getrost sparen (wenn du den IE nicht in den Quirksmodus gschickt hast). Das ist nur für Versionen bis einschließlich IE 5.5, den heute keine Sau mehr benutzt