обрезается li в div при наличии горизонтального скрола

[beliy]

Я не профи в верстке и работы по верстке делаю чисто для себя. Но на днях столкнулся с нерешаемой для себя проблемой, пускай и не критической, но которая режет глаза. Дело в том что прикрутив к своему скромному бложеку скрипт geshi, обнаружил проблему когда при наличии скрола цвет фона для li обрезается (смотреть скриншот)

пример можно посмотреть по ссылке

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

Edited October 2, 2012 by beliy

[Whatsup]

а в чем проблема ? у тебя эта строка задается классом hl-2 ищи его в своих стилях, там прописан фиксированный горизонтальный размер

[SelenIT]

Имхо, проще всего задать для ol, в котором вся эта зебра выводится, display: inline-block.

[beliy]

2 SelenIT

проще всего задать для ol, в котором вся эта зебра выводится, display: inline-block.

прописал в стилях

.geshi-syn ol{display: inline-block;}

не помогло((

Если не затруднит, можете более подробнее расписать?

Edited October 2, 2012 by beliy

[SelenIT]

Странно, имхо, должно было помочь (в FF, Хроме и IE9 вроде бы помогает, полоски li-шек растягиваются по самой длинной строке текста). Или я не так понял задачу?

[beliy]

Извините, изначально прописал стиль в самом низу css, когда прописал повыше отобразило нормально... Спасибо...

Но к сожалению теперь появилась проблема с IE - растягивает контент на ширину скрола(( Тестировал на IE 8.

[SelenIT]

Как вариант, можно скрыть этот стиль от IE8 (напр., через незнакомый ему селектор, типа .geshi-syn ol:last-of-type). Тогда в IE8 будет как было (полоски не до конца, зато дизайн не поломан), а в IE9 и всём более новом должно быть как положено.

[Whatsup]

Вы не ищете легких путей. Я же указал на проблему. Все решаемо 4 символами

[SelenIT]

Whatsup, я понял проблему так, что здесь список и его элементы наследуют ширину контейнера (поскольку у них display:block) и переполняются, а нужно, чтобы они растягивались по ширине контента (так ведут себя display:inline-block/table/table-cell и float). Можно увидеть, как этого добиться 4 символами?

[beliy]

Как вариант, можно скрыть этот стиль от IE8 (напр., через незнакомый ему селектор, типа .geshi-syn ol:last-of-type). Тогда в IE8 будет как было (полоски не до конца, зато дизайн не поломан), а в IE9 и всём более новом должно быть как положено.

Спасибо большое за помощь, жаль что система не дает поставить благодарность ("пишет что превышен лимит, хотя благодарностей еще никому не ставил")

Получилось решить проблему без использования неизвестного типа. Корректно отображает для всех браузеров кроме осла ниже 7

Edited October 3, 2012 by beliy

[Whatsup]

Взять и прописать размерность ширины. Открыл фоксовский редактор, добавил туда ширину 100 процентов и все работает.

[SelenIT]

Куда "туда"?

[Whatsup]

В инлайн стили прописал. но там у каждой такой полоски есть стиль хл-2

[SelenIT]

Вот что получается (настоящий фикс, который успел поставить автор темы, я ради эксперимента временно выключил):

Еще соображения есть?

[Whatsup]

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

[beliy]

когда есть скрол, то проблемы нет, но вот когда ширина блока нормальная и скрол не появляется, то подсветка строк обрезается. Пример можно посмотреть здесь

Подскажите как сделать чтоб корректно отображалось в обоих случаях? Заранее спасибо за помощь...

[SelenIT]

Пожалуй, проще всего добавить этому же списку min-width: 535px.

[beliy]

Пожалуй, проще всего добавить этому же списку min-width: 535px.

можете подробнее? там width прописан фиксировано и min-width не срабатывает((

спасибо, разобрался... Благодарность так и не могу поставить(((

Edited October 8, 2012 by beliy