Как я могу дать каждому <li> собственное изображение пули?

Я пробовал

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

с

#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);
}

безрезультатно. Появится только диск. Если я хочу, чтобы каждый отдельный элемент списка имел свою собственную пулю, как я могу выполнить это с помощью css, без использования фоновых изображений.

Изменить: я обнаружил, что, несмотря на то, что говорит мне firebug, правило списка-стиля-образа переопределяется каким-то образом. Если я встраиваю правило так:

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

тогда все хорошо. Поскольку у меня нет других правил в тестовом примере, который я запускаю, который содержит ul или li в селекторе, я не уверен, почему inlining дает другой результат.

Ответы

Ответ 1

Сначала определите, находитесь ли вы в режиме "quirks" или нет, потому что для многих свойств CSS это имеет значение.

Во-вторых, W3c указывает, что URL-адрес должен быть в двойных кавычках (хотя я также не использую кавычки). Пойдите со спецификацией, чтобы сэкономить проблемы на линии.

Если вы указываете "строго" в своем DOCTYPE, браузер может потребовать двойные кавычки в стандарте.

Ответ 2

Попробуйте следующее:

#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');
}

Ответ 3

Я не уверен, что это ваша проблема, но вы используете относительные ссылки на свои изображения. Когда вы используете относительные ссылки в css, это относится к css файлу, но если он встроен, он будет относиться к странице html.

Ответ 4

Дело в том, что я пробовал свой код, он работает. Единственный раз, когда это не так, если изображения отсутствуют. Возможно, вам нужно проверить, чтобы изображения, которые вы указываете в CSS, на самом деле находились в папке или не были написаны с ошибкой.

ПРИМЕЧАНИЕ: В обоих firefox и т.д.

Ответ 5

Я бы предложил сделать это несколько иначе, в CSS - i.e.:

#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;
}

Ответ 6

Вы можете дважды проверить, что эти изображения находятся там, где вы думаете. Этот пример отлично работает, если изображения отсутствуют.

Ответ 7

Я бы никогда не подумал. Если я приведу URL-адрес, например:

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

он начинает работать. Я его недооцениваю, и он останавливается. Я думал, что это не должно меняться.

Спасибо за вашу помощь, всем.

Ответ 8

Не могли бы вы попытаться добавить тип list-style-type: none; в # контакт-лист? Возможно, даже вместо вашего списка: декларация.

Ответ 9

Мне больно это предлагать, но вы пробовали важный флаг? Кроме того, он ведет себя одинаково в других браузерах? Что, если это что-то, что у вас есть в вашем файле userChrome.css Firefox?

Ответ 10

Вы можете попробовать добавить! важно после свойства list-style-image, которое предотвратило бы его переопределение.

Ответ 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;
}