Вёрстка разделителей списков

[Wak]

Здравствуйте!

Столкнулся с проблемой. Не знаю как написать CSS для списка вида:

Элемент1 | Элемент2 | Элемент3

Скрипт выводит html код вида:

<ul>
    <li>Элемент1</li>
    <li>Элемент2</li>
    <li>Элемент3</li>
</ul>

Проблема в том, что элементов может быть любое количество, но если через CSS привязать разделитель (в данном случае - символ "|"), то он будет применяться и для последнего элемента списка (что совсем не нужно).

Посоветуйте, как быть в данной ситуации?

[Svatov]

У меня тоже нет, смотрю через ИЕ9, F12 - средства разработчика и там Режим браузера ие7 Режим документов стандартный ие 7

Edited January 16, 2012 by Svatov

[Softlink]

У меня тоже нет, смотрю через ИЕ9, F12 - средства разработчика и там Режим браузера ие7 Режим документов стандартный ие 7

Так http://jsfiddle.net/Softlink/NFsvf/2/? Бордеры должны быть меньше текста?

[Svatov]

В точности как на картинке

Edited January 16, 2012 by Svatov

[Softlink]

В точности как на картинке

Я думал, что ты первый раз баг показал. Тогда с бордерами тут вряд ли получится. Надо ставить картинку в фон. Но все же не писать лишнюю разметку

[Svatov]

С бордером какбы вроде и работает только не в ие7, хотя верстка не совсем логична и правильна, но работает же). Ие7 в его множестве багов я пока слабо ориентируюсь, пока не знаю чем объяснить его такое поведение и как подтулить под него...и с hasLayout игрался...не помогло...сделал в итоге кстати как ты сказал через background.

Edited January 16, 2012 by Svatov

[bob_24]

Что бы не плодить однотипных тем спрошу здесь. Возникла проблема в Хроме с версткой подобного меню.

Тут обсуждалось как делать разделитель похожий на бордер, а если, например, нужен разделитель другого вида например "?"?

Список:

<ul>
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
</ul>

и CSS:

li{
    float:left
    }
li:before{
    content:'? ';
    }
li:first-child:before{
    content:'';
    }

Получается вот что:

Что за ерунда такая?

[Softlink]

bob_24, для каждой проблемы своя тема. Сейчас все работает прекрасно. На этом обсуждение в этой ветке вашего вопроса закончим.

Edited January 16, 2012 by Softlink

[psywalker]

С бордером какбы вроде и работает только не в ие7, хотя верстка не совсем логична и правильна, но работает же). Ие7 в его множестве багов я пока слабо ориентируюсь, пока не знаю чем объяснить его такое поведение и как подтулить под него...и с hasLayout игрался...не помогло...сделал в итоге кстати как ты сказал через background.

Дружище, а я немного не въехал, в чём подвох? Чем такой вариант плох?

http://jsfiddle.net/NFsvf/3/

[Svatov]

Есть выноска из макета (пост №29), нужно добиться такого результата с помощью списков с методом через бордер и так чтобы работало в ие7. Я добился лишь только работы в последних браузерах, ниже ие8 уже такое не работает (код в первом посте это странице).

Edited January 16, 2012 by Svatov

[sigma77]

Svatov,

http://jsfiddle.net/Vcbk4/1/

Так, вроде, работает

[Svatov]

Оксана - Power, что еще добавить Это гениально, особенно, когда кажется, что сделать это невозможно

Edited January 16, 2012 by Svatov

[psywalker]

Svatov,

http://jsfiddle.net/Vcbk4/1/

Так, вроде, работает

Да, Оксан, отлично, пашет. В нашем веке использовать дополнительный контейнер для палки - это неправильно, так как есть же куча вариантов, как её заменить. А на ИЕ7 вообще пора бы уже подзабить конкретно))

Оксан, кстати, а как у вас на работе с ИЕ7? Не отказались ещё?

Оксана - Power, что еще добавить Это гениально, особенно, когда кажется, что сделать это невозможно

Кстати, вот ещё такой вариантик придумал:

http://jsfiddle.net/NFsvf/7/

[Nekromancer]

У меня для ие7 такое не получилось через бордер

В смысле бордеры размером меньше чем текст? Это надо смотреть, как делалось это все.

a {
display: block;
}
li {
overflow: visible;
height: a[line-height] - 3px; 
border-right: 1px ...;
}

[sigma77]

Оксан, кстати, а как у вас на работе с ИЕ7? Не отказались ещё?

На текущем проекте поддержка ИЕ7 на уровне чтобы работало и смотрелось нормально (без косяков) - т.е. для теней и уголков можно использовать CSS3.

[psywalker]

Оксан, кстати, а как у вас на работе с ИЕ7? Не отказались ещё?

На текущем проекте поддержка ИЕ7 на уровне чтобы работало и смотрелось нормально (без косяков) - т.е. для теней и уголков можно использовать CSS3.

Блин, жаль конечно. Когда же уже наконец вы сможете вздохнуть свободно

[Nekromancer]

Блин, жаль конечно. Когда же уже наконец вы сможете вздохнуть свободно

ИЕ7 3.4% по миру. Причём стремительно теряется за последние месяцы. За пол годика точно сдохнет, а так раньше даже

[sigma77]

Блин, жаль конечно. Когда же уже наконец вы сможете вздохнуть свободно

В данном проекте - это в принципе оправдано

Хорошо еще, что не IE6

ИЕ7 3.4% по миру. Причём стремительно теряется за последние месяцы. За пол годика точно сдохнет, а так раньше даже

Средняя температура по палате

[SelenIT]

Имхо, 7-й сдохнет быстрее, чем 6-й. За 6-й кое-где цепляются из-за заточенного под него корпоративного софта, с 7-м такой проблемы не будет, т.к., во-первых, такая проблема появилась до него, во-вторых, любой из более новых можно перевести в режим его эмуляции. Кроме того, 6-ка — последняя версия, на которую можно проапгрейдиться под Win 9x (не в этом ли причина его сверхпопулярности в Китае?), а везде, где работает 7-ка, можно бесплатно проапгрейдиться хотя бы до 8-ки (и сама MS мягко, но настойчиво это предлагает). Не случайно даже в том же Китае 7-й IE уже почти уполз ниже 5%-ного барьера, господствуют 6-я и 8-я версии (предельные для своих веток Windows) и заметно растет 9-я...

[Wak]

На этом форуме каждая тема сводится к проблемам с IE?

[psywalker]

На этом форуме каждая тема сводится к проблемам с IE?

Нет, не каждая)

[Nekromancer]

Он всем уже просто надоел так, ибо когда открываешь тему по вёрстке, 90% что там проблема именно с ним

Цифры образные, если кто придраться захочет.

[Wak]

На этом форуме каждая тема сводится к проблемам с IE?

Нет, не каждая)

Только та тема, которая касается вёрстки?