Wie kann ich geben jeden seine eigene Kugel Bild?

Question

Ich habe versucht,

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

mit

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

ohne Erfolg. Erscheint nur eine Scheibe. Wenn ich jedes einzelnes Listenelement haben soll seine eigene Kugel, wie kann ich dies zu erreichen mit CSS, ohne Hintergrundbilder mit .

Edit: Ich habe entdeckt, dass, trotz allem, was Firebug mich sagt, wird die list-style-image Regel irgendwie außer Kraft gesetzt werden. Wenn ich die Regel inline, etwa so:

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

dann ist alles gut. Da ich keine anderen Regeln im Testfall habe ich ausgeführt habe, dass enthält ul oder li in den Selektor, ich bin nicht sicher, warum inlining ein anderes Ergebnis gibt.

Answer 1

Zuerst bestimmen, ob Sie in „Macken“ -Modus sind oder nicht, denn für viele CSS-Eigenschaften es einen Unterschied macht.

Zweitens, die W3c gibt an dass die URL in doppelten Anführungszeichen angegeben werden soll (obwohl ich nicht die Anführungszeichen verwenden, entweder). Gehen Sie mit dem spec selbst in die Bredouille zu speichern.

Wenn Sie „streng“ in Ihrem DOCTYPE angeben, dann kann der Browser die doppelten Anführungszeichen erfordern, gemäß dem Standard.

Answer 2

Versuchen Sie folgendes:

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 3

Ich bin mir nicht sicher, ob dies das Problem ist, aber Sie verwenden relative Links auf Ihre Bilder. Wenn Sie relative Links in CSS verwenden, ist es in Bezug auf die CSS-Datei, aber wenn es inlined ist, wird es auf die HTML-Seite relativ sein.

Answer 4

Die Sache ist, ich Ihren Code versucht, es funktioniert. Das einzige Mal, es tut, ist nicht, wenn die Bilder nicht vorhanden sind. Vielleicht müssen Sie überprüfen, um zu sehen, dass die Bilder, die Sie in der CSS angeben tatsächlich in den Ordner Bilder sind oder nicht falsch geschrieben.

. HINWEIS: In beiden Firefox und IE

Answer 5

Ich würde vorschlagen, es etwas anders, in der CSS zu tun - das heißt:.

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

Answer 6

Sie könnten doppelt überprüfen, dass diese Bilder sind, wo Sie denken, sie sind. Dieses Beispiel funktioniert gut, es sei denn die Bilder fehlen.

Answer 7

Ich hätte nie gedacht. Wenn ich die URL zitieren, etwa so:

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

es beginnt zu arbeiten. Ich unquote es, und er stoppt. Ich dachte, das ist nicht einen Unterschied machen soll.

Danke für Ihre Hilfe, jeder.

Answer 8

Sie könnten versuchen, das Hinzufügen list-style-type: none; zu # contact-Liste? Vielleicht sogar statt Ihrer list-style:. Deklaration

Answer 9

Es schmerzt mich, es vorschlagen, aber haben Sie versucht, die! Important Flagge? Auch dann, wenn es das gleiche in anderen Browsern verhalten? Was passiert, wenn dies ist etwas, das Sie in Ihrer Firefox userChrome.css Datei haben?

Answer 10

Sie könnten versuchen Sie! Important nach der list-style-Bildeigenschaft, die es vor dem Überschreiben verhindern würde.

Answer 11

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}