VPF::Ненужный перенос строки в Safari и Chrome

turing

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

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

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

Делаю заголовок сайта с менюшкой.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page</title>
<style>
#header {
background: tan;
overflow: hidden;
width: 100%;
}
#header h1{
float: left;
font-size: 150%;
}
#header ul{
float: right;
}
#header ul li{
display: inline;
list-style: none;
margin-left: 0.5em;
}
</style>
</head>
<body>

<div id="header">
<h1>Header</h1>
<ul>
<li><a href="#"><img src="dumb.png" width="20" />About</a></li>
<li><a href="#"><img src="dumb.png" width="20" />Big</a></li>
<li><a href="#"><img src="dumb.png" width="20" />Crocodile</a></li>
</ul>
<div style="clear:both;height:1px;overflow:hidden;"></div>
</div>

<div id="main">
Stuff goes here
</div>

</body>

</html>

В FF3, IE6-8, O9 работает как надо:
user posted image

А вот Safari 3 и Chrome 2 портят картину:
user posted image

Если убрать ссылки (элементы a внутри li), то проблем со строкой нет. Если убрать margin-left у li, тогда тоже.

В чём причина такого поведения?

Violator

Дата 2.6.2009, 12:05 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

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

turing,
вас такой вариант устроит?

Код


#header ul li{
...
padding-left: 20px;
background: url(dumb.png) no-repeat 0 center;
...
}

Код


...
<li><a href="#">About</a></li>
<li><a href="#">Big</a></li>
<li><a href="#">Crocodile</a></li>
...

turing

Дата 2.6.2009, 13:04 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

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

Устроит, спасибо. Однако любопытно ещё и объяснение странностей в моём примере.

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