✔ Box-Modell Fehler bei Firefox?

[ark1707]

Hi Zusammen,

eigentlich komme ich aus der Delphi und php-Ecke, aber nachdem ich die Vorteile von CSS erkannt habe, möchte ich mich nun gerne diesem Thema widmen. Nachdem ich jetzt einige Zeit gelernt und geübt habe, habe ich irgendwie den Eindruck, daß das Box-Modell des von Firefox fehlerhaft ist. Gesetzt den Fall ich definiere die Box a mit dem Hintergund rot, und die Box b als Unterelement mit dem Hintergrund blau. Gebe ich nun bei Box b mit margin-top 1px, dann wird im IE richtig ein 1px schmaler Streifen mit dem Hintergrund von Box a (rot) angezeigt, in Firefox hingegen verschieben sich beide Boxen nach unten

Ein Beispiel dazu in einem Menü, bei welchem ich dies gerne als Trennlinie einsetzen würde, unter http://www.medisurf.de/public/css/left_menu/

Bei Trennlinien mit dem hr-Tag habe ich insbesondere bei 1px hohen Linien sehr schlechte Erfahrung in der Interpretation durch den IE und Firefox gemacht, daher diese Variante.

Weiß jemand woran das liegt, wie man das umgehen kann, und ob es nochmehr Dinge gibt, die man auf jeden Fall beachten sollte. So wirklich praktisch, meine ich. Vielleicht ließe sich aus der vorhandenen Erfahrung eine Liste machen, die allen Besuchern dienen würde

Viele Grüße und vielen Dank,

Alex

 

[Maik]

Verwende mal die padding-Eigenschaft für das übergeordnete Element:

div#a {
background: #ff0000;
padding: 1px;
}

div#b {
background: #0000ff;
}

 

[ark1707]

Hi,

vielen Dank für die Antwort, aber macht er trotzdem nicht. Abgesehen davon, was mache ich, wenn ich mehrere verschachtelte div-Elemente habe, bis zu welcher Ebene verwende ich padding, bzw. ab wann margins?
Und noch mehr: Warum ist das so?

Viele Grüße,

Alex

Siehe (einmal mit IE, einmal mit Firefox) http://www.medisurf.de/public/css/left_menu/

 

[Maik]

Hast du es schon mal mit border-top und border-bottom als Trennlinie versucht?

Außerdem empfehle ich dir, eine Liste zum Strukturieren der Navigation zu verwenden, und diese mit CSS zu formatieren, denn in deinem HTML-Quelltext ist die Divitis ausgebrochen ;-]

Beispiele für CSS-Listenmenüs findest du auf Listamatic: one list, many options.

 

[ark1707]

Bisher noch nicht, ich werde es direkt mal versuchen. Die Frage für mich bleibt nach wie vor, warum er die Subbox nicht als Child erkennt?

Gruß Alex