Горизонтальное меню в IE6

[d0ublezer0]

Что-то я запутался.

По совету друзей (с) сначала решил забить на IE6, но что-то совесть не позволила.

Теперь у меня вопросы по верстке.

CSS:

#mm_container {
	background:url(/images/mm_a.png) repeat-x;
	height:74px;
	}

#mm_container ul{
	display:table;
	margin: 0 auto;
}
#mm_container li{
	display:table-cell;
}
#mm_container a {
	display: block;
	float:left;
	height:74px;
	padding:0 20px;
	font-family:"Hortensia";
	color:#fff;
	text-decoration:none;
	font-size:1.7em;
	line-height:74px;
	}
#mm_container li {
	background:url(/images/mm_a_separator.png) left no-repeat;
}
#mm_container a:hover {
	background:url(/images/mm_a_hover.png) repeat-x;
	}
#mm_container li.current a {
	background:url(/images/mm_a_hover.png) repeat-x;
}

HTML:

<div id="mm_container">
  <ul>
	<li class="current"><a href="#">Главная</a></li>
	<li><a href="#">Компания</a></li>
	<li><a href="#">Каталог продукции</a></li>
	<li><a href="#">Партнерам</a></li>
	<li><a href="#">Контакты</a></li>
  </ul>
</div>

В чем проблема - ie6 не понимает display:table и display:table-cell, соответственно меню располагается вертикально вместо горизонтали.

Если сделать UL и LI inline, то IE6 поймет. но тогда я не смогу использовать графический разделите как подложку для LI

Как поступить? Что нужно подсунуть IE6 чтобы он всё понял как положено?

Блин, детский сад какой-то, голова не соображает

Вот тут можно посмотреть: http://km.transmagistral.ru/

(только начал делать верстку)

если кодировка неверно определится (там UTF-8), извините, еще настройки сервера не применились, через пару минут наладится.

Edited July 7, 2010 by d0ublezer0

[npofopr]

а float:left; чем не подходит?

[d0ublezer0]

Не подходит тем, что при нем UL прибивается к левому краю в IE.

[psywalker]

Не подходит тем, что при нем UL прибивается к левому краю в IE.

А если так

http://www.psywalker.ru/Forum/JS/tab2/Tab-massive.html

[d0ublezer0]

Отлично, спасибо!

[psywalker]

Отлично, спасибо!

Не за что, обращайся

[d0ublezer0]

А теперь еще, как сделать, чтобы пункты меню не сваливались вниз, когда ширину окна делаешь меньше чем ширина меню?

Да, и UL теперь выползает за правый край. Чет не пойму, почему. Вернее, вижу, но как нивелировать не знаю.

Edited July 7, 2010 by d0ublezer0

[psywalker]

Задай минимальную ширину UL, а для ИЕ6 забей, пусть вниз перескакивают.

[d0ublezer0]

Минимальную ширину актуально задавать элементам, у которых известен размер. Меню же будет формироваться с различным количеством пунктов.

И, посмотри пожалуйста - я не понимаю, почему в твоем примере не появляется горизонтальный скролл из-за UL left:50% а в моем варианте - появился.

[psywalker]

Поставь <div id="mm_container"> вот этому блоку overflow:hidden; и полоса исчезнет.

[d0ublezer0]

Сработало в ФФ, опере и хроме.

В IE7 - нет

[psywalker]

Сработало в ФФ, опере и хроме.

В IE7 - нет

Попробуй zoom:1;

[d0ublezer0]

Неа, не помогает

Даже в шестом сработало. а в седьмом - нет

Edited July 8, 2010 by d0ublezer0

[d0ublezer0]

Собственно, страничку с проблемой можно посмотреть там же

[d0ublezer0]

Да, уточнение - полоса-то в седьмом IE исчезла, а скролл остался.

Вот скрин, я специально прокрутил вправо, чтобы эффект был виден:

:

[locky]

Да, уточнение - полоса-то в седьмом IE исчезла, а скролл остался.

Проблема в ИЕ7 решается добавлением блоку с #mm_container стиля position:relative

[d0ublezer0]

locky спасибо.

сам чего-то не додумался, хотя знал. в отпуск пора.

Edited July 9, 2010 by d0ublezer0

[JTaMeP]

Доброй ночи всем!

Подскажите начинающему как сделать горизонтальное меню в ie6 чтоб оно лесенкой не становилось?

Пример

CSS:

#menu{
	background:#000000;
	width:1000px;
	height:50px;
	}
/*Навигация меню горизонтальное*/
#menu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	height:50px;
	width:1000px;
	font-size:12px;
	background:url(../images/file1.png) repeat-x;
	font-family:Arial, Helvetica, sans-serif;
}
#menu ul li a{
	display:block;
	float:left;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	padding:15px 15px 5px 15px;
	height:30px;
	font-size:14px;
}
#menu ul li a:hover {
	color:#FFFFFF;
	background:url(../images/file2.png) repeat-x;
	font-size:14px;
}

Edited February 12, 2011 by JTaMeP

[swetlana]

а почему у li нет ни float: left, ни display: inline?

чтобы выстроить горизонтально, обычно применяется один из этих двух способов.

[JTaMeP]

а почему у li нет ни float: left, ни display: inline?

чтобы выстроить горизонтально, обычно применяется один из этих двух способов.

Что-то я не совсем понял где именно надо поставить ?

у меня стоит щас так:

#menu ul li a{

display:block;

float:left;

color:#FFFFFF;

text-decoration:none;

text-align:center;

padding:15px 15px 5px 15px;

height:30px;

font-size:14px;

}

[JTaMeP]

Может кто нибудь возмется за $ подправить меню чтоб в ie6 нормально было? пишите в ЛС.

[ВовчиГ]

li {float: left;}

Ты ЛС отключил...

[JTaMeP]

li {float: left;}

Ты ЛС отключил...

Спасибо заработало...

По поводу ЛС что-то я ненашел где его включать ...

[psywalker]

По поводу ЛС что-то я ненашел где его включать ...

Само включиться, когда 30 постов наберёшь.