Форум hotibo.ru

Кроссбраузерно и универсально никак.
IE не понимает селекторы "+", псевдоcелекторы last-child и first-child.
Только если представить что пунктов только 3, что каждый пункт никогда не будет двустрочным и что можно именно картинкой сразу заложить высоту бекграунда A (тот, который #list ul li a {background: #CDA175;}), тогда лепим в фотошопе на прямоугольники цвета #CDA175 и нужного размера последовательно все три картинки, далее:
- Oбернуть все это дело еще дивом, задать ему в стилях background: url("путь/рисунок1") no-repeat left top /* или подогнать с помощью em четко на свое место под первую ячейку*/;.
- На DIV#list в стилях повесить background: url("путь/рисунок2") no-repeat left 50% /* или подогнать с помощью em четко на свое место под вторую ячейку по горизонтали, в % по вертикали*/;
- Далее, на DIV#list UL в стилях повесить background: url("путь/рисунок3") no-repeat left bottom /* или подогнать с помощью em четко на свое место под третью ячейку по горизонтали, в % по вертикали*/;

И последним этапом отобрать бекраунд у A : #list ul li a {background: transparent;}.

Но это конечно, идиотизм )))


PS:
"Только если представить что пунктов только 3" - подумав, пришел к выводу что это не принципиально, их может быть и больше, но каждый новый пункт захочет добавления еще одного оберточного DIV-a и постоянного переписывания %-ых значений вертикального выравнивания у остальных ячеек, оно вам надо???

Короче, точно полнейший идиотизми.

Легче добавлять смысловые семантические классы, немного сложнее назначать классы с помощью js только для IE и применить конструкцию для всех остальных браузеров вида

UL LI{background: url("путь/рисунок2")}
UL LI:first-child{background: url("путь/рисунок1")}
UL LI:last-child{background: url("путь/рисунок3")}

И для большего количества пуктов меню:
UL LI:first-child + LI{background: url("путь/рисунок4")}
UL LI:first-child + LI + LI{background: url("путь/рисунок5")}
и т.д.

Отредактированно Newone (13.03.2013 12:56)

после целого дня издевательств над списком нашел решение:

#list ul li a[title='1'] {background-color: #FF0000;}
#list ul li a[title='2'] {background-color: #FFFF00;}
....

и ссылкам внутри лишек даем соответствующие тайтлы.

З.Ы. ппц а все  было так просто... Каждий день узнаешь что-то новое (хотя опыт и сознание принуждает думать, что знаешь уже абсолютно все)

Отредактированно narby (13.03.2013 18:40)

Newone написал:

Решение с тайтлами то же самое что и решение с добавлением классов, причем оно более глупое, так как татлы не отработаются в IE6
/2008/01/08/css-selectors/

1)в моем случае данный вариант лучший с десятка других..
2) не тоже самое что классами! так как список генерится динамически и при добавлении пункта можно прописать к нему как тайтл так и имя...
3) я сделал привязку к "name" ане "title"
4) в IE6 все работает без проблем


з.ы. предложи свой "не глупый" вариант,  раз ты такой умный, ато языком ля-ля все умные, ближе к делу и по теме!...