Jump to content
  • 0

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


beliy
 Share

Question

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

afea0c93148f.png

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

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

Edited by beliy
Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

2 SelenIT

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

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

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

не помогло((

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

Edited by beliy
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

Edited by beliy
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Edited by beliy
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy