Frage zu Box-Model Problem

**MSVMax** · 06.06.2008 18:13

Hallo,
Ich bin Anfänger, was HTML- und CSS-Programmierung angeht und habe jetzt als erstes folgende Seite für meinen Verein entworfen: VfL Edewecht Fußball

Nun habe ich ein Problem mit dem Menü auf der linken Seite:
Mit meinem Safari-Browser sieht alles wunderbar aus, mit dem Firefox ist unten der Abstand zwischen dem untersten Menüpunkt und dem Ende der Hintergrundgrafik gleich Null, was nicht so toll aussieht.
Das größte Problem macht aber der Internet Explorer und zwar in der Version 6. Bei dem ist der Menüblock nach rechts eingerückt, sodass er seitlich nicht mit der oberen Grafik abschließt und die beiden untersten Menüpunkte befinden sich unterhalb der Grafik, weil die Grafik quasi zu kurz ist.

Nun glaube ich, dass es sich um ein Problem mit dem Box-Model handelt.
Allein: Ich habe keine Ahnung, wie ich das lösen soll.
Kann mir jemand einen Tipp geben bzw. einen Lösungsvorschlag posten.

Vielen Dank,

**Efchen** · 06.06.2008 20:00

Hallo,

so vorweg, weder HTML noch CSS sind Programmiersprachen.

Du bist doch für einen Anfänger schon recht gut, dass Du mit "Box Model" was anfangen kannst. Aber von da ist es nur ein ganz kleiner Schritt, herauszufinden, dass der IE6 im sogenannten Quirks Mode ein falsches Box Model hat. Und dass man mit dem Doctype die Browser in Quirks bzw. Standards Mode oder Almost Standards Mode schalten kann. Nimm den richtigen Doctype, wenn alle im Standards Mode sind, dann arbeiten sie auch alle mit dem richtigen Box Model.
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Gruß,
-Efchen

**csstester** · 07.06.2008 09:59

Warum hat eigentlich deine CSS datei nen Prima doctype und deine Html nicht?
In deine CSS gehören nur CSS Deklarationen, keine HTML geschichten wie Doctype, <html> oder <body> usw.

Ansonsten doch ein ganz anständiger Code

Du solltest vieleicht der Navi ein padding-bottom geben, da das Stadion fast aus der Grafik heraushängt.

und hier

Code:

padding: 40px 10px 40px;

ist entweder eine Angabe zuviel oder eine zu wenig.
Denn 1 Angabe, alle Seiten gleich.
2Angaben, die erste für oben und unten, die 2te für rechts und links.
3Angaben..Keine Ahnung was die Browser draus machen.
4 Angaben= oben, rechts, unten, links

gruß
csstester

**MSVMax** · 07.06.2008 11:51

Also erstmal vielen Dank für Eure Hilfe.

@Efchen: Wenn ich das richtig verstanden, arbeitet der IE 6.x für HTML 4.01 Strict DTD im Standard Mode, also müsst es eigentlich klappen, wenn ich als Doctype folgendes hinschreibe oder?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Leider funktioniert es trotzdem nicht und der IE stellt es immer noch falsch dar.

@csstester: Also wenn ich das richtig verstanden habe, müsste meine CSS-Datei einfach so aussehen:

Code:

<style type="text/css"> ... </style>

. Richtig?
Und in den HTML-Dateien hatte ich ja vorher folgendes stehen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Also einen Doctype ohne URI oder? Und nun habe ich aber noch die URI eingefügt und habe folgendes:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ist das so nun korrekt?

Zu dem Padding-Problem. Ich habe mich an selfhtml.org gehalten und dort steht, dass bei drei Angaben die 1. oben, die 2. links-rechts und die 3. unten bezeichnet. SelfHTML zu padding

Ich habs jetzt aber geändert und explizit padding-top, padding-left und padding-bottom genommen. Ich hab nur padding-left genommen, weil es dann eben gut gepasst hat.
Das Problem mit dem Firefox versteh ich auch nicht so recht. Beim Safari passt es wunderbar mit dem Abstand nach unten, beim Firefox macht der unter dem letzten Listenpunkt "Stadion" keinen Abstand nach unten und wenn ich padding-bottom erhöhe bringt es nichts, weil das Hintergrundbild auf jeden Fall direkt unter "Stadion" endet.
Hast du eine Idee, was man da machen kann?

**neuroleptika** · 07.06.2008 12:26

Die Hintergrundgrafik ist nicht hoch genug.

Wenn du ein border-bottom für ul#Navigation angibst, kannst du sehen wie hoch die Liste wirklich ist.

doctype:
Die Uri spielt bei html4.01 strict meines Wissens nur im IE5 mac eine Rolle.
So wie sie jetzt auf deiner Seite steht ist es für alle Browser ok.

**csstester** · 07.06.2008 12:42

In der CSS datei selber brauchst auch keine <style> oder so, einfach nur die CSS deklarationen aufschreiben, nix mit spitzen klammern

Zitat von MSVMax

Zu dem Padding-Problem. Ich habe mich an selfhtml.org gehalten und dort steht, dass bei drei Angaben die 1. oben, die 2. links-rechts und die 3. unten bezeichnet. SelfHTML zu padding

oh, das war mir neu, schön, wieder was gelern

**neuroleptika** · 07.06.2008 13:29

Der Abstand links von ul#Navigation (IE6) kommt durch das voreingestellte margin in <ul>. Das ist bei jedem Browser unterschiedlich eingestellt.
margin-left: 0; oder margin: 0; für ul#Navigation entfernen den Abstand.
Da steht bis jetzt nur margin-top: 0px;

Die großen Abstände zwischen den einzelnen Listeneinträgen im IE6 verschwinden, wenn du ul#Navigation li display: inline gibst. Allerdings funktionieren dann die Abstände padding-top und padding-bottom nicht mehr wie gewünscht. Da <a> display block hat, kannst du diese Abstände mit padding für <a> ausgleichen. Oder besser noch mit margin (top oder bottom).

**MSVMax** · 07.06.2008 15:10

Super ich habs jetzt so gemacht und es funktioniert mit allen drei Browsern.
Vielen Dank für eure Hilfe.

Thema: Frage zu Box-Model Problem

LinkBack

Themen-Optionen

Frage zu Box-Model Problem

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

MYSQL PROBLEM! auto_increment Danke für jede Hilfe

Problem bei Realisierung eines Zurück-Buttons in HTML

Mail-Script :: Problem / Frage

Problem mit gestreckter Tabelle [Feste Höhe einer Tabelle]

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen