Подскажите пожалуйста

[bravada j]

Приветствую всех!

По сути:

Столкнулся с давно описанной проблемой, а именно - расстоянием от маркера(маркир. списка) до текста. Вот здесь, в Рецептах показан доходчивый и надёжный способ (li {padding-left: 20px;}),но в моём случае он почему-то не работает...в FF нормально,в IE, Opera не работает.

Вот участок CSS:

li {	padding-left: 20px;
		list-style-image: url(images/li.gif);
		list-style-position:inside;
}
li:hover {list-style-image: url(images/li-hover.gif);
}

Очень интересно, почему это не работает,может у меня где-то ошибка?

Посмотреть как именно не работает

Edited May 20, 2009 by bravada j

[Styx]

Из-за этого:

list-style-position:inside;

маркер не выносится за границу элемента списка, а будет отображаться в элементе. Отступ 20px будет слева от маркера (изображения).

[Searcher]

картинка плавающая все сбивает

[bravada j]

Большое спасибо за толковые советы ,вот таким образом добился желаемого результата:

li {	padding-left: 10px;
		list-style-image: url(images/li.gif);
		list-style-position: inherit;
}
li:hover {list-style-image: url(images/li-hover.gif);


}

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

Ещё раз спасибо

Edited May 20, 2009 by bravada j

[psywalker]

bravada j

Советую тебе картинки у элементов списка задавать через свойство: li {background: url(li.jpg) left no-repeat; + padding необходимый, и всё

[bravada j]

bravada j

Советую тебе картинки у элементов списка задавать через свойство: li {background: url(li.jpg) left no-repeat; + padding необходимый, и всё

Большое спасибо psywolker за дельный совет, так действительно лучше, только я ещё добавил top,а то маркер по середине отображался

[psywalker]

bravada j

Пожалуйста друг, обращайся, если чё..

p.s.- кстати насчёт выравнивания изображения, ты можешь делать так: li {background: url(li.jpg) 0 60% no-repeat;, тоесть 0 60% - вот эта запись означает, что Картинка будет выровнена: 0 пикселей от левого края и 60% от верхнего, тоесть она будет чуть ниже середины..Возьми этот способ на заметку

[bravada j]

bravada j

Пожалуйста друг, обращайся, если чё..

p.s.- кстати насчёт выравнивания изображения, ты можешь делать так: li {background: url(li.jpg) 0 60% no-repeat;, тоесть 0 60% - вот эта запись означает, что Картинка будет выровнена: 0 пикселей от левого края и 60% от верхнего, тоесть она будет чуть ниже середины..Возьми этот способ на заметку

Класс!Спасибо, не знал что процентная запись работает ,обязательно возьму это на вооружение. По идее тогда должна работать и пиксельная запись (li {background: url(li.jpg) 0 5px no-repeat;)

Моё почтение мастерам кодинга

[psywalker]

bravada j

По идее тогда должна работать и пиксельная запись (li {background: url(li.jpg) 0 5px no-repeat;)

Да и Пиксельная и любые единицы измерения подойдут, просто отличие в том, что Например Если делать Пикселями 0 5px, то картинка будет всегда 5 пикселей сверху, а если Процентами 0 60%, то она будет всегда 60% сверху,независимо сколько у тебя строчек, понимаешь? Вобщем пробуй, и делай по ситуации, как тебе удобно

[bravada j]

bravada j

Да и Пиксельная и любые единицы измерения подойдут, просто отличие в том, что Например Если делать Пикселями 0 5px, то картинка будет всегда 5 пикселей сверху, а если Процентами 0 60%, то она будет всегда 60% сверху,независимо сколько у тебя строчек, понимаешь? Вобщем пробуй, и делай по ситуации, как тебе удобно

Ясность полная