Горизонтальное меню уезжает вниз в Опере

[mitille]

Всем привет!

Горизонтальное меню уезжает вниз в Опере 9.27 (и подозреваю, что в других операх тоже).

Ознакомиться можно здесь http://mitille.jino-net.ru/, тестю.

Что бы такого впендюрить в цсс чтобы все было ок?

#header1 {
	 width: 100%;
	 height: 48px;
	 position: relative;
	 /*float: left;*/
	 /*overflow: auto;*/
}

#header2 {
	 position: relative;
	 top: -40px;
	 /*left: auto;*/
	 width: 201px;
	 height: 196px;
	 margin: 0 auto;
	 /*margin:-20px -20px -20px -20px;*/
	 /*padding: 0px 0px 0px 0px;*/
	 /*float: top;*/
	 /*overflow: hidden;*/
}

#menu {
	 width: 1080px;
	 height: 47px; 
	 margin: 0 auto;
	 padding-top: 0px;
	 padding-left: 0px;
	 /*overflow: auto;*/
	 /*overflow-y: hidden;*/
	 /*overflow-x: auto;*/
}


#menu ul {
	 margin: 0;
	 padding-top: 0px;
	 list-style: none;
	 line-height:48px;
}

#menu li {
	 padding: 0;
	 margin: 0;
	 float: left;
	 height: 47px;
}

#menu a:link {
	 margin: 0;
	 display: block;
	 width: 200px;
	 height: 44px;
	 padding-top: 0px;
	 text-decoration: none;
	 text-transform:uppercase;
	 text-align: center;
	 font-family: Helvetica, sans-serif;
	 font-size: 14px;
	 font-weight: bold;
	 color: #ffffff;
	 border: 0px solid;
	 background: url(images/static_button.png) no-repeat;
	 /*letter-spacing: 0.5px; the distance between the letters*/
}

#menu a:visited {
	 color: #ffffff;
	 background: url(images/static_button.png) no-repeat;
	 text-decoration: none;	 
}

#menu a:active {
	 color: #ffffff;
	 background: url(images/hover_button.png) no-repeat;
	 text-decoration: none;
}

#menu a:hover {
	 color: #ffffff;
	 background: url(images/hover_button.png) no-repeat;
	 text-decoration: none;
}

#menu .current_page_item a {
	background: url(images/hover_button.png) no-repeat;
	color: #ffffff;
}

#menu .current_page_item a:hover {
	background: url(images/hover_button.png) no-repeat;
	color: #ffffff;
}

<div id="header1">
</div>
<div id="header2">
<img src="images/logo_main.png" alt="hello!" />
</div>
<div id="menu">
<ul>
<?php
$menuItems = array("Who we are" => "who", "Register" => "register", 
"Terms" => "terms", "Clients" => "clients", 
"Company" => "company");
foreach($menuItems as $key => $value)
{
echo "<li id = \"".$value."\">";
echo "<a href=\"java script:changePageContent('".$value."')\" onfocus=\"this.blur()\">".$key."</a></li>";
}
?>
</ul>
</div>

Поможите чем можите! спасибо)

Edited February 28, 2011 by mitille

[Vlad]

Что же вы так плохо о пользователях Оперы думаете. Кто же сейчас этой старой версией пользуется!

[mitille]

Даже не знаю что вам сказать... моя задача сделать это корректо отображаемым где бы то ни было. Не для себя ведь делаю Хотя для себя бы тоже также проверяла))

проверила только что в Опера 11.01 - последняя - те же дрова (

Edited February 28, 2011 by mitille

[swetlana]

о как!

Значит не зря у меня старинная Опера завалялась

В общем так:

Вы #header2 сдвигаете наверх при помощи position: relative, top: -40px, да ещё и height: 196px задаёте.

А попробуйте обойтись без relativ'а. Сделайте margin-top: -40px;

И высоту указывать на надо. Или же пересмотреть её надо.

А то древняя Опера не верит и резервирует под #header2 230px.

Надеюсь, вы знаете, что такое position: relative и как он работает? В принципе, поведение Оперы9 тут вполне объяснимо.

и да, в новой Опере тоже всё так же работает.

[mitille]

swetlana, спасибо большое, позишн действительно был не в тему.

А вы не подскажете, как теперь лучше лого отцентровать? Я поставила margin-left:45%, нормальный ли это вариант?

Edited February 28, 2011 by mitille

[swetlana]

не самый нормальный.

margin: -34px auto 0px;

так лучше.

когда слева и справа маргины auto, они выставляются одинаковые. Визуально это и получается размещение элемента по центру.

[mitille]

swetlana, спасибо вам, вы очень помогли!

единственный момент остался - внизу справа подпись названия сайта съезжает чуть вниз. Как ее на уровень ссылок поместить бы?

Edited March 1, 2011 by mitille