CSS-Box / ul-Menü

Question

Ich habe ernsthafte Probleme bekommen meine CSS richtig zu arbeiten. Anders sieht es in allen drei Browsern, die ich benutze (Chrome, IE und FF).

Nun zur Frage in der Hand, ich habe versucht, das Beispiel aus der folgenden URL zu kopieren: http://www.alistapart.com/articles/taminglists/ scrollen Sie nach unten nur fast bis zum Boden und suchen Sie nach „in der realen Welt“ und ein blaues Menü.

ich dieses Menü implementiert haben, aber ich kann nicht die benutzerdefinierten Bilder zu arbeiten (ich verwende ein benutzerdefiniertes Bild)

Es funktioniert perfekt in Chrome, dann bekomme ich das Aussehen, die ich nach bin. Im IE bekomme ich einen Seitenrand auf der linken Seite des Menüs, wo das Bild befindet, und das Bild ist innerhalb dieser Marge? und in FF, die Bilder stellen sich über den Text und schafft einen lustigen Blick (auch im Randbereich).

Meine URL lautet: http://homeweb.mah.se/~M09K0291/123789/Lab7/

Ich habe versucht, ein separates Stylesheet für IE hinzuzufügen und entfernt die Polsterungen / Margen wieder, aber das hat nicht funktioniert. Ich möchte die Ausgabe, die Chrome produziert.

Answer 1

Jeder Browser hat ihre eigene Reihe von Vorgaben für Marge, Polsterung, Abstand usw. Das ist, wo die meisten der Unterschiede in CSS kommen. Betrachten Sie einen Reset Sheet für Ihre gesamte Website. Dies sollte Ihnen eine gemeinsame Grundlinie geben, die von allen Browsern anerkennen sollte. Wenn Sie nicht wollen, oder nicht leisten können, ein Reset-CSS für das gesamte Stylesheet zu setzen, zumindest machen für Ihr Menü.

Machen Sie die erste Regel diese für Ihr Menü, dann definieren alle anderen Menüstile nach dieser:

/* This example assumes your menu is contained 
   in a <div /> with an ID of "menu" */
div#menu, div#menu ul, #menu li, ul#menu a
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1;
    list-style: none;
}

Das sollte die meisten Ihrer Probleme beheben.

Answer 2

Das Problem könnte sein, die Art und Weise verschiedener Browser-Listen erstellen. Entweder mit Polsterungen oder Rand auf Listenelementen

Wenn Sie die list-style-position entfernen Regel und geben einem 32px margin-left auf dem li Tag, werden Sie das Häkchen sehen, zumindest in Firefox , ausgekleideten die beschriebene Weise nach oben. Die Firebug-Erweiterung ist eine große Hilfe bei solchen Problemen zu diagnostizieren.

Ein Reset Sheet wird Ihnen auch helfen Einheitlichkeit der Art und Weise Browsern Stile Griff zu bringen (wie ein schneller richtig angegeben Antwort).