ie7 и абсолютное позиционирование

Shockwaves · May 2, 2012

Доброго времени суток! В процессе работы над простым шаблоном наткнулся на неприятную ситуацию отображения в IE7. Проблема с горизонтальным меню, при выборе в верхней строке пункта, в нижней строке должен появлятся подпункт, прямо под верхним пунктом. Используется скрытие display: none и абсолютное позиционирование подменю. Во всех браузерах все адекватно, а в Ie7 подпункт появляется справа от пункта, а должен быть прямо под ним снизу.

<html>

<head>

<style>

#nav {

height: 95px;

background: #fff;

}

#nav ul{

display: block;

width: 100%;

}

#nav ul li{

float: left;

display: block;

padding: 6px 17px 14px 1px;

text-align: left;

}

#nav ul li.first{

padding-left: 36px;

}

#nav ul li.last{

padding-right: 15px;

}

#nav ul li a{

padding: 10px;

line-height: 37px;

font: bold 14px Verdana, sans-serif;

color: #666;

}

#nav span.podmenu {

position: absolute;

display: none;

padding-top: 30px;

background: transparent;

vertical-align: bottom;

}

#nav ul li span.podmenu a { font-size: 13px;}

#nav ul li:hover, #nav ul li.active{

background: #58c2d8;

}

#nav ul li:hover>a, #nav ul li.active>a{

color: #fff;

text-decoration: underline;

}

#nav ul li:hover span.podmenu, #nav ul li.active span.podmenu {

display: block;

}

#nav ul li:hover span.podmenu a:hover{

color: #58c2d8;

text-decoration: underline;

}

</style>

</head>

<body>

<ul>

<li class="first"><a href='/'>Головна</a></li>

<li >

<a href='/'>Місцева демократія</a>

<a href='#'>Законодавчи инициативы</a>

<a href='#'>Позиции експертив</a>

</span>

</li>

<li><a href='/'>Державна допомога</a></li>

<li><a href='/'>Державні закупівлі</a></li>

<li><a href='/'>Свідомий вибір</a></li>

<li class="last"><a href='/'>Мережа</a>

</li>

</ul>

</div>

</body>

</html>

Уже даже думаю под таблицу переписать :unsure:

Yazon_Nile · May 4, 2012

Не обижайтесь, но код ваш ужасен..

#nav ul{

display: block;

width: 100%;

}

список и так блочный и имеет ширину 100%

Вместо этого лучше бы обнулили паддинги и маржины + лейаут.. Список то схлопнулся!

#nav ul li{

float: left;

display: block;

padding: 6px 17px 14px 1px;

text-align: left;

}

текст алигн-лефт по умлолчанию есть + при флоте елементы становятся блочными. (лишки блочные по умолчанию)

#nav ul li a{

padding: 10px;

line-height: 37px;

font: bold 14px Verdana, sans-serif;

color: #666;

}

не все браузеры хавают лаин=хеит на инлайновых элементах.

Верхний и нижний паддинги на инлайновые елементы - это ошибка.

Вот сюда бы дисплеи:блок - было бы логично поставить

#nav span.podmenu {

position: absolute;

display: none;

padding-top: 30px;

background: transparent;

vertical-align: bottom;

}

Зачем вертикал алигн?

При позишн абсолют нету данных о позиционировании - лефт или райт, топ или боттом


#nav{
	height:1%;
	font:15px/17px Arial, Helvetica, sans-serif;
	list-style:none;
	margin:0;
	padding:0;
}
#nav:after{
	clear:both;
	content:'';
	display:block;
}
#nav > li{
	float:left;
	margin:0 0 0 10px;
}
#nav li:first-child{margin:0;}
#nav > li > a{
	color:#000;
	display:block;
	padding:10px;
	text-decoration:none;
}
#nav > li:hover{
	position:relative;
}
#nav > li > a:hover,
#nav > li:hover > a{background:#ffc;}
#nav ul{
	display:none;
	font-size:12px;
	line-height:15px;
	left:0;
	list-style:none;
	margin:0;
	top:100%;
	padding:0;
	position:absolute;
	width:auto;
}
#nav > li:hover ul{display:block;}
#nav ul li{
	float:left;
	margin:0 0 0 5px;
}
#nav ul a{
	color:#333;
	float:left;
	padding:5px;
	text-decoration:none;
}
#nav ul a:hover{background:#c2c2c2;}


	<ul id="nav">
		<li><a href="#">Головна</a></li>
		<li>
			<a href="#">Місцева демократія</a>
			<ul>
				<li><a href="#">Законодавчи инициативы</a></li>
				<li><a href="#">Позиции експертив</a></li>
			</ul>
		</li>
		<li><a href="#">Державна допомога</a></li>
		<li><a href="#">Державні закупівлі</a></li>
		<li><a href="#">Свідомий вибір</a></li>
		<li><a href="#">Мережа</a></li>
	</ul>

Edited May 4, 2012 by Yazon_Nile

Shockwaves · May 5, 2012

Большое спасибо за ответ, действительно в коде много косяков есть) Некоторые вещи только недавно узнал. Но ваш вариант не совсем работает по примеру. Вот тут

#nav ul{

display:none;

font-size:12px;

line-height:15px;

left:0;

list-style:none;

margin:0;

top:100%;

padding:0;

position:absolute;

width: auto;

}

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

Shockwaves · May 5, 2012

хотя нет, таблицей тут никак не получится

Yazon_Nile · May 7, 2012

Что нужно в итоге получить?

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

Shockwaves · May 7, 2012

да, так же само как и в моем первом примере, у вас получился вертикальный, а мне нужен горизонтальный

Yazon_Nile · May 7, 2012

А как себя будут вести выпадающие пункты у послендней лишки к примеру?

Обычно, горизонтально выпадающие списки располагаются не под "своей" лишкой, а в каком-то одном и том же месте для всех.

Например под основным списком слева. Или справа. Кому как нравится..

Shockwaves · May 7, 2012

согласен, но мне нужно меню без выпадающего списка. А с последней не знаю, пока это можно опустить. Потом думаю сделать так чтобы последний подпункт последней главной лишки отталкивался от правого края навигации

Yazon_Nile · May 8, 2012

А с последней не знаю, пока это можно опустить.

В этом и проблема, что сейчас абы сделать, а когда за жопу проблема возьмет, и буду думать)

Сразу такие вещи надо делать и продумывать

Shockwaves · May 8, 2012

мне хотя бы сейчас сделать так, потом узнаю что то еще, то уже будет проще

Sign In

ie7 и абсолютное позиционирование

Question

Shockwaves

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

Shockwaves

Link to comment

Share on other sites

Shockwaves

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Shockwaves

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Shockwaves

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Shockwaves

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information