Как я могу дать каждому <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 в селекторе, нет других правил, я не уверен, почему встраивание дает другой результат.
Решение
Сначала определите, находитесь ли вы в режиме «причуд» или нет, потому что для многих свойств CSS это имеет значение.
Во-вторых, W3c указывает что URL-адрес должен быть в двойных кавычках (хотя я тоже кавычки не использую).Следуйте спецификации, чтобы избежать проблем в будущем.
Если вы указываете «строгий» в своем DOCTYPE, браузер может потребовать двойные кавычки в соответствии со стандартом.
Другие советы
Попробуй это:
#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');
}
Я не уверен, что это ваша проблема, но вы используете относительные ссылки на свои изображения.Когда вы используете относительные ссылки в CSS, они относятся к файлу CSS, но если они встроены, они будут относиться к странице html.
Дело в том, что я попробовал ваш код, он работает.Единственный раз, когда этого не происходит, - это отсутствие изображений.Возможно, вам нужно проверить, что изображения, указанные вами в CSS, действительно находятся в папке images и не написаны с ошибками.
ПРИМЕЧАНИЕ:В обоих Firefox и ie.
Я бы предложил сделать это немного по-другому, в CSS, т.е.:
#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;
}
Вы можете дважды проверить, находятся ли эти изображения там, где вы думаете.Этот пример работает нормально, если изображения не отсутствуют.
Я бы никогда не подумал.Если я процитирую URL-адрес, например:
#contact_list #phone
{
list-style-image: url("/images/small_wood_phone.png");
}
оно начинает работать.Я удаляю это из кавычек, и оно останавливается.Я думал, что это не должно иметь значения.
Спасибо за вашу помощь всем.
Не могли бы вы попробовать добавить тип списка:никто;в #контакт-список?Возможно, даже вместо вашего стиля списка:декларация.
Мне больно это предлагать, но пробовали ли вы флаг !important?Кроме того, в других браузерах он ведет себя так же?Что, если это есть в вашем файле userChrome.css в Firefox?
Вы можете попробовать добавить !important после свойства list-style-image, чтобы предотвратить его переопределение.
#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;
}