Подскажите, пожалуйста, это баг или что? Следующий HTML-код отображается некорректно только в Firefox и Mozilla (я пробовал на версиях 1.5 и 1.7.12 соответственно). Элемент "Menu Item 8" на экране находится за пределами прямоугольника, заданного тегом  <div class="menu">, хотя, согласно коду, должен находиться внутри него.

Выделить код

Код:

<html>
<head>
	<style>
	<!--
	html body {
		margin: 0;
	}
	.menu {
		position: absolute;
		top: 2%;
		left: 0;
		line-height: 250%;
		font-weight: bold;
		text-align: right;
		background-color: #8B4513;
		white-space: nowrap;
		z-index: 3;
		/*border: solid thin;*/
	}
	.menu div {
		display: inline;
		margin: 1%;
		/*border: solid thin;*/
	}
	.left {
		position: absolute;
		top: 0;
		left: 0;
		width: 60%;
		height: 100%;
		background-color: #FFDEAD;
		z-index: 1;
	}
	.right {
		position: absolute;
		top: 0;
		left: 60%;
		width: 40%;
		height: 100%;
		background-color: #D2B48C;
		z-index: 0;
	}

	a:link, a:visited, a:active, a:hover {
		color: #fff;
	}
	-->
	</style>
</head>

<body>

<div class="menu">
	<div><a href="/">Menu Item 1</a></div>
	<div><a href="/">Menu Item 2</a></div>
	<div><a href="/">Menu Item 3</a></div>
	<div><a href="/">Menu Item 4</a></div>
	<div><a href="/">Menu Item 5</a></div>
	<div><a href="/">Menu Item 6</a></div>
	<div><a href="/">Menu Item 7</a></div>
	<div><a href="/">Menu Item 8</a></div>
</div>


<div class="left"></div>

<div class="right"></div>

</body>
</html>

Благодарю за потраченное время.

==> Разработка

Харитон Устинович Йорк
попробуйте удалить "text-align: right" из .menu

indi

Спасибо, это решает проблему. Но вопрос остается: почему при выравнивании текста вправо содержимое DIV'а вылазит за его пределы? Другие браузеры все отображают корректно.