Перейти к содержимому


Выбрать шаблон и создать сайт

Проблема с позиционированием списка

#1 Гость_StormMan_*

Гость_StormMan_*
  • Гости
0

Отправлено 14 Февраль 2009 - 23:22

Друзья, доброго времени суток!!

Суть вопроса: заданы размеры элементов ul и li, для наглядности одинаковые. При просмотре в различных браузерах наблюдается такая картина: в IE7 блоки li и ul и занимают указанные в коде размеры и занимают одну и ту же область, а в FF и Opera перед элементом li внутри тэга ul получается отступ порядка 30px, в результате чего li смещается вправо относительно ul. ul переполняется, вёрстка ползёт... Жуть. Как сделать, чтобы в Лисе и Опере ничего не ползло? Чтобы элемент списка не вылазил из самого списка из-за непонятно откуда взявшегося отступа? Подскажите плиз!

<ul style='widht: 50; height: 20; background-color:#F00;'>
<li style='widht: 50; height: 20; list-stile:none; background-color:#00F;'></li>
</ul>

Результат в опере и лисе (картинка): Изображение

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 16 Февраль 2009 - 10:35

StormMan, Проблема простая, как же не быть оступ, если это спец-элемент(список) с маркером. Отступ идёт под маркер.
Зачем вообще высоту ставить ul, он будет по высоте списка, высоту лучше ставить только для li
Вообще достаточно ul прописать padding: 0px;. Но для более точного отображения советую писать
list-style: none outside none; padding: 0px;
То есть вот так:
<ul style='widht: 50; background-color: #F00; list-style: none outside none; padding: 0px;'>
<li style='widht: 50; height: 20; list-stile:none; background-color:#00F;'>asd</li>
<li style='widht: 50; height: 20; list-stile:none; background-color:#00F;'>asd</li>
</ul>

  • 0

#3 Гость_StormMan_*

Гость_StormMan_*
    Topic Starter
  • Гости

Отправлено 16 Февраль 2009 - 15:51

ZiTosS, огромное спасибо за такой развёрнутый ответ! Проблема решена;)
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 16 Февраль 2009 - 21:28

Всегда пожалуйста ;) Рад помочь!
  • 0


Оформление форума – IPBSkins.ru