VPF::Стили для <ul><li> в разных браузерах

RinOSpro

Дата 18.11.2009, 17:52 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

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

Код


<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.

Это сообщение отредактировал(а) RinOSpro - 18.11.2009, 17:53

Itsys

Дата 18.11.2009, 18:10 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Недавно была тема про padding и разные браузеры

RinOSpro

Дата 18.11.2009, 18:30 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

blah

Дата 18.11.2009, 19:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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;
}

Это сообщение отредактировал(а) blah - 18.11.2009, 19:18

RinOSpro

Дата 19.11.2009, 10:10 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »