Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Стили для <ul><li> в разных браузерах

Автор: RinOSpro 18.11.2009, 17:52

Схожу с ума... Подскажите пожалуйста.

Есть страничка со списком:

Код


<html>
  <link href="main.css" rel="stylesheet" type="text/css"/>
<body>

  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт N</li>
    <li>Пункт N + 100500</li>
  </ul>
</body>

Так же есть стили:

Код


body {
  font:normal 12px Arial,Helvetica,sans-serif;
  text-align:center;
  margin:40px;
  width:100%;
  height:100%;
}
ul {
  position: absolute;
  border:1px solid #000000;
  text-align:left;
  line-height:18px;

  list-style-image: url("icon.gif"); /*W:23 H:20*/
}
li {
  padding:4px;
  width:180px;
}

Уже очень долго мучаюсь и не могу сделать чтоб работало в 3 бразузерах. Хотя бы похоже.

Должно получиться примерно следующее, иконка имеет одинаковый отступ сверху, снизу, по бокам.
И текст по центру. Вот ни как не могу добиться этого у IE, Opera, и FireFox одновременно (.

Особенно картину портит IE.

Автор: Itsys 18.11.2009, 18:10

Недавно была http://forum.vingrad.ru/forum/topic-279701.html про padding и разные браузеры

Автор: RinOSpro 18.11.2009, 18:30

Эта тема не особо помогла( Теперь стали большие изменения между Opera и FF
Может как то можно более универсально написать?

Автор: blah 18.11.2009, 19:14

1. Где doctype?
2. Чему должна быть равна высота body? 100% + 80px?
3. Кроссбраузерно будет так:

Код


ul {
    position: absolute;
    border:1px solid #000000;
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    line-height:18px;
}
li {
    padding:0 0 0 27px;
    margin:4px;
    width:180px;
    background:url(icon.gif) no-repeat;
}

Автор: RinOSpro 19.11.2009, 10:10

blah зачетнейшее спасибо)) +