Проблема с CSS: не отрисовывается фон области списка

VEG · №1

Возникла странная проблема. Не отрисовывается фон списка меню. Вот код:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>slutsk.net</title>
<style type="text/css">
body	{
	background: #ffffff;
	color: #000000;
	margin: 0px;
	padding: 0px;
	}

ul#head-nav {
	list-style: none;
	position: relative;
	border-top: 7px solid #61a3b2;
	background-color: #00677e;

	font-family: Verdana,Arial,Helvetica,Tahoma,sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #ffffff;

	margin: 0px;
	padding: 0px;
	width: 100%;
	}

ul#head-nav li {
	border-left: 1px solid #61a3b2;
	float: right;
	}

ul#head-nav li:hover {

	}

ul#head-nav li a {
	color: #ffffff;
	display: block;
	font-weight: bold;
	float: left;
	padding: 2px 5px;
	text-decoration: none;
	}

ul#head-nav li:hover a {

	}
</style>
</head>

<body>
<ul id="head-nav">
<li><a href="http://www.slutsk.net/about/">О нас</a></li>
<li><a href="http://www.slutsk.net/links/">Ссылки</a></li>
<li><a href="http://www.slutsk.net/chat/">Чат</a></li>
<li><a href="http://www.slutsk.net/forums/">Форум</a></li>
<li><a href="http://www.slutsk.net/">Портал</a></li>
</ul>
Добро пожаловать на наш сайт, уважаемый пользователь!
</body>
</html>

В IE & Opera все работает, в Firefox почему-то область списка не увеличивается. Где я допустил ошибку?
Пробовал множество различных вариантов задания этого стиля. Но у каждого обнаруживались различные минусы. Например если в ul#head-nav указать position: absolute, то область увеличивается нормально во всех браузерах, но при этом нижеследующий текст прячется под этим меню. Я понимаю, что текст можно обернуть в div с clear: bath, но я не думаю, что это корректное решение. Что бы вы могли посоветовать?

Отредактировано VEG (10-07-2006 01:01:31)

Al_H · №2

Не совсем понятно, какова цель данных движений. Что должно было получиться?
Очевидно, достаточно добавить последний li с классом lastItem

Выделить код

Код:

.lastItem {height: 0; line-height: 0; padding: 0; margin: 0; list-style: none; float: none; clear: both;}

Или применить эмуляцию свойства clear-after:

Выделить код

Код:

ul:after {display: block; content: "."; height: 0; line-height: 0; font-size: 1px; visibility: hidden; clear: both;}

... подробнее смогу сказать, если Вы объясните, чего Вы добивались. И тем более, зачем вкладывать два floatа один в другой?

VEG · №3

Нужно:

Имею:

Подобная проблема, когда в заданный div текст не влазит - фон не растягивается, и текст рисуется поверх нижеследующего контента.
float: left в ul#head-nav li a по ходу дела можно удалить, он ничего не меняет.
Можно ли обойти проблему без изменения html (т.е. изменяя только CSS)?

Отредактировано VEG (10-07-2006 15:24:00)

Al_H · №4

Вы пробовали

Выделить код

Код:

ul:after {display: block; content: "."; height: 0; line-height: 0; font-size: 1px; visibility: hidden; clear: both;}

и он не помог?
Тогда давайте сделаем что-то вроде

Выделить код

Код:

ul {overflow: hidden;}
/* Hide from Mac IE \*/
ul {overflow: auto;}
/* */

Отредактировано Al_H (10-07-2006 17:38:32)

skywalker · №5

Поставь для ul{display:table;}
а для li{display:table-cell;}
В конце концов, начальный код изменится, только на 2 строки и не нужно будет, что-то еще придумывать.
Весь код:

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>slutsk.net</title>
<style type="text/css">
body    {
    background: #ffffff;
    color: #000000;
    margin: 0px;
    padding: 0px;
    }

ul#head-nav {
    list-style: none;
    position: relative;
    border-top: 7px solid #61a3b2;
    background-color: #00677e;

    font-family: Verdana,Arial,Helvetica,Tahoma,sans-serif;
    font-size: 8pt;
    font-weight: bold;
    color: #ffffff;

    margin: 0px;
    padding: 0px;
    width: 100%;
    display:table
    }

ul#head-nav li {
    border-left: 1px solid #61a3b2;
    float: right;
    display:table-cell;
    }

ul#head-nav li:hover {

    }

ul#head-nav li a {
    color: #ffffff;
    display: block;
    font-weight: bold;
    float: left;
    padding: 2px 5px;
    text-decoration: none;
    }

ul#head-nav li:hover a {

    }
</style>
</head>

<body>
<ul id="head-nav">
<li><a href="http://www.slutsk.net/about/">О нас</a></li>
<li><a href="http://www.slutsk.net/links/">Ссылки</a></li>
<li><a href="http://www.slutsk.net/chat/">Чат</a></li>
<li><a href="http://www.slutsk.net/forums/">Форум</a></li>
<li><a href="http://www.slutsk.net/">Портал</a></li>
</ul>
Добро пожаловать на наш сайт, уважаемый пользователь!
</body>
</html>

Полезная информация

№110-07-2006 00:47:59