Probleme mit Darstellung in Browsern mit CSS

[mangani84]

Hallo zusammen!
Ich hoffe, ihr könnt mir weiterhelfen.

Bin gerade beim Gestalten einer Homepage.

Nur habe ich das Problem, dass meine 2 Div Ordner, welche eigentlich nebeneinander liegen, im Firefox und im Internetexplorer anders dargestellt werden.

Im Internetbrowser ist alles bündig, aber nicht mittig dargestellt, sondern links und im Firefox ist sind die Boxen Mittig dargestellt, aber verschieben sich nach unten???

Wie soll ich daraus nur schlau werden?? Hoffe ihr könnt mir da weiterhelfen?

Gruß
mangani84

 

[Efchen]

Hallo,

ein Link ist immer hilfreicher als Trockenschwimmen.

Aber es hört sich sehr nach unterschiedlichem Box Model an. Der Internet Explorer hat hier den Fehler. Du brauchst
a) ein Verständnis vom "Box Model"
b) einen Doctype für Dein Dokument, das alle Browser in den Standard Mode versetzt, da kann der IE das Box Model nämlich richtig.

Gruß,
-Efchen

 

[mangani84]

Hoppla, stimmt, hier mal mein Modell:

www.russischehochzeiten.de - Deutsche Startseite

 

[Efchen]

Also, hier meine TODO-Liste für Dich:

1. Du brauchst einen DOCTYPE, der alle Browser in den Standard Mode versetzt. Mit HTML 4.01 Transitional wird das nichts. Derzeit versetzt Du alle Browser in den Quirks Mode, weswegen die Darstellung nicht genormt ist und überall anders aussieht.
Übersicht über alle Doctypes+Browser+Modes: -- LANtastic :: Artikel -- DTD - Document Type Declaration - Das richtige Doctype
Alles über DOCTYPES: -- LANtastic :: Artikel -- DTD - Document Type Declaration - Das richtige Doctype
2. Entferne die Tabelle. Ein Menü stellt man als <ul> dar. Eine tabelle dient nur der Auszeichnung tabellarischer Daten.
http://sebold.jan-andresen.de/
3. Deine beiden Textboxen unten haben zusammen eine Breite von 757px. Das Bild oben nur 750px. Das passt natürlich nicht zusammen.
Wie ich auf 757px komme?
#textbereichlinks width 557px + 2x border = 2px + 2x padding = 8px
#textbereichrechts width 180px + 2x border = 2px + 2x padding = 8px
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
4. Die Namen "textbereichrechts" und "...links" sind schlecht gewählt. Ein besonderer Vorteil von CSS ist, dass man das Layout der gesamten Site (also aller Seiten) mit dem Austausch einer Datei (dem Stylesheet) komplett ändern kann (Siehe css Zen Garden: The Beauty in CSS Design). Wenn Du mal diese beiden Textbereiche vertauschen willst, heißt der eine "rechts", ist aber auf der linken Seite. Dann kannst Du Dich damit entweder ständig verwirren oder Du musst den Namen auf jeder HTML-Seite abändern, ein Aufwand, der vermeidbar ist.
Außerdem gehört zur "Trennung von Inhalt und Layout" auch, dass man in die HTML-Datei nichts mehr schreibt, was auf das Layout hinweist, weder veraltete HTML-Tags, noch Tabellenmissbrauch, noch Namen für Klassen oder IDs. Dient alles der Übersichtlichkeit und validem Code. Nur mit einem soliden Grundgerüst mit validem HTML-Code kann man davon ausgehen, dass CSS wirklich das macht, was man ihm sagt.

Gruß,
-Efchen

 

[mangani84]

Hallo zusammen!

@ Efchen, vielen Dank erstmal für deine genaue Beschreibung. Da kommt ja noch einiges an Arbeit auf mich zu :-).

Werde mich nachher mal ransetzen und versuchen, alles umzusetzen.

Gruß
mangani84