В Опере 10.50 едет меню

[Valerievna]

Во всех браузерах нормально, даже в ИЕ, меню по ширине 960, все собрано точь в точь, если уменьшать отступы по бокам, нарисовывается разделительная поллоса с боку, тоже не красиво. Везде работает, кроме Оперы. Меню на css.
Как можно сделать, чтобы вписать боковую ячейку, чтоб Опера не смещала ее вниз, и полосы сбоку небыло?

 

[tigra60]

А код? или рисуночек...

 

[Valerievna]

Да, конечно, чето я не подумала.
Вот, так должно быть
А так в Опере

Код css:

.menu{
	width: 960px;
	height: 32px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	font-style: bold;
	text-decoration: none;
}

.menu ul{
	margin: 0;
	padding: 0;
	float: left;
	width: 960px;
	height: 32px;
	background: #996633;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #330000;
	border-right-color: #330000;
	border-bottom-color: #330000;
	border-left-color: #330000
}

.menu ul li{
display: inline;
}

.menu ul li a{
	float: left;
	color: #330000;
	padding: 10px 10px 10px 10px;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #330000;
}

.menu ul li a:visited{
color: #330000;
}

.menu ul li a:hover, .menu ul li .selected{
	color: #FFffff !important;
	padding: 10px 10px 10px 10px;
	background: #cc9966;
}

Код html:

<div class="menu"> 
<ul> 
<li><a href="http://">Главная</a></li>
<li><a href="http://">О сообществе</a></li>
<li><a href="http://">О телепередаче Час Суда</a></li>
<li><a href="http://">Обсуждение эфиров</a></li>
<li><a href="http://">Новости</a></li>
<li><a href="http://">Истории телезрителей</a></li>
<li><a href="http://">Участники шоу</a></li>
<li><a href="http://">Форум</a></li>
</ul>
</div>

 

[Serg@NT]

Первое, что напрашивается - убрать строго заданную ширину

width: 960px;

Т.к. текст просто физически не влезает в эти размеры, вот и перескакивает на следующую строку. У меня, например, в ФФ 3.6 тоже перескакивает. Так что, всё зависит от локальных настроек каждого пользователя.

Да, высоту лучше тоже убрать, т.к. при изменении размера шрифта (в ФФ - ctrl+"плюс" / ctrl+"минус") у меня вертикальные границы пунктов меню вылезают за пределы коричневой области.

 

[Valerievna]

Не действует нужны более радикальные меры

 

[gor]

попробуй задать .menu свойство margin:auto

 

[Serg@NT]

Не действует нужны более радикальные меры

не может быть.. И из .menu, и из .menu ul убрала?

 

[gor]

Использовал margin:auto для .menu(Opera 10.50)

 

[Valerievna]

попробуй задать .menu свойство margin:auto

Получилось вот так:
А мне надо, чтобы ровно в один ряд было

не может быть.. И из .menu, и из .menu ul убрала?

Да. Вообще не реагирует.

 

[tigra60]

1. Из класса menu убираем width: 960px; и height: 32px;
2. В классе menu ul:
- убираем height: 32px;
- устанавливаем width: 1043px;
- убираем весь правый бордюр
3. Любуемся результатом.

Валерьевна! Когда будем учить матчасть?!
"Брынза не бывает зеленого цвета. Вас обманули! Ей полагается быть белой!"
font-style может быть только normal, italic (курсив) или oblique (наклонный)! :wacko:
Удачи!

 

[Valerievna]

В Опере теперь стало действительно нормально, а в остальных наоборот, правй край вылез

А что все полосы убраться должны? А кнопочки оставить не как нельзя?
Может я что то не так сделала?

.menu{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: lighter;
        font-style: normal;
        text-decoration: none;
}

.menu ul{
        margin: 0;
        padding: 0;
        float: left;
        width: 1043px;
        background: #996633;
        border-top-width: 1px;
        
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #330000;
        
        border-bottom-color: #330000;
        border-left-color: #330000
}

.menu ul li{
display: inline;
}

.menu ul li a{
        float: left;
        color: #330000;
        padding: 10px 10px 10px 10px;
        text-decoration: none;
		        

}

.menu ul li a:visited{
color: #330000;
}

.menu ul li a:hover, .menu ul li .selected{
        color: #FFffff !important;
        padding: 10px 10px 10px 10px;
        background: #cc9966;
}

 

[tigra60]

Я же не говорил, что правый бордюр нужно убирать из .menu ul li !!!
font-style: normal; нужен только тогда, если предкам <div class="menu"> задан какой-то стиль шрифта (например, body {font-style:italic}), что, в общем-то, сомнительно. А так он по умолчанию normal.

font-weight: lighter; весьма сомнительно, что Verdana, Arial или Helvetica смогут передать шрифт тоньше обычного, да еще и в таких размерах.

Может быть имелся в виду жирный шрифт, тогда нужно font-weight:bold и обязательно пересчитать ширину!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.menu{
        font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-decoration: none;
}

.menu ul{
	width:1043px;
        margin: 0;
        padding: 0;
        float: left;
        background: #996633;
        border: 1px solid #330000;
        border-right: none;
}

.menu ul li{
display: inline;
}

.menu ul li a{
        float: left;
        color: #330000;
        padding: 10px 10px 10px 10px;
        text-decoration: none;
        border-right: 1px solid #330000;
}

.menu ul li a:visited{
color: #330000;
}

.menu ul li a:hover, .menu ul li .selected{
        color: #FFffff !important;
        padding: 10px 10px 10px 10px;
        background: #cc9966;
}
</style>
</head>

<body>
<div class="menu"> 
<ul> 
<li><a href="http://">Главная</a></li>
<li><a href="http://">О сообществе</a></li>
<li><a href="http://">О телепередаче Час Суда</a></li>
<li><a href="http://">Обсуждение эфиров</a></li>
<li><a href="http://">Новости</a></li>
<li><a href="http://">Истории телезрителей</a></li>
<li><a href="http://">Участники шоу</a></li>
<li><a href="http://">Форум</a></li>
</ul>
</div>
</body>
</html>

Проверено IE-8, FF-3.6, Chrome, Safari, ну и, конечно, О-10.50
Удачи!

 

[Valerievna]

Спасибо огромное! Что бы я без вас делала! Все работает! Я конечно не все поняла, что изменилось, но буду усиленно вникать. Спасибо!