Лишние отступы и проблема с border+z-index в IE7

[TMGLUK]

Здравствуйте. Есть непростое меню, где элементы при наводке увеличиваются, занимая часть пространства соседнего элемента.

Вот оно: http://atm-book.ru/test/1/

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

Естественно, что во всех нормальных браузерах всё работает как надо.

Код HTML:

<ul class="main_menu">
 <li><a href="#">Новости</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Новости</a></li>
</ul>

Код CSS:

ul.main_menu {
	width:162px;
	margin:0 auto;
	line-height:30px;
}
ul.main_menu>li {
	position:relative;
	height:30px;
	border-top:1px solid #d8dadc;
}
ul.main_menu>li:first-child, ul.main_menu>li:hover {
	border-top:none;
	padding-top:1px;
}
ul.main_menu>li>a {
	display:block;
	height:30px;
	width:100%;
	padding-left:32px;
	color:#5b646c;
	background:url(images/menu.png) 5px 9px no-repeat;
	text-decoration:none;
	font-weight:bold;
	white-space:pre;
	overflow:hidden;
}
ul.main_menu>li:hover>a {
	position:absolute;top:0px;left:0;z-index:1;
	height:37px;
	color:#fff;
	background:url(images/menua.png) no-repeat;
}

Многое перепробовал, но так и не понял ни что вызывает появление отступа, ни что заставляет появляться границу сквозь верхний элемент (ну это наверное баг IE и границу можно вставить как картинку в крайнем случае).

Помогите пожалуйста.

Edited April 12, 2011 by TMGLUK

[rediskavet]

IE6-7 не всегда правильно срабатывает z-index.

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

Просто повесить border-bottom на li вместо border-top, а ссылке на наведение сделать top: -1px.

ul.main_menu {
        width:162px;
        margin:0 auto;
        line-height:30px;
}
ul.main_menu>li {
        position:relative;
        height:30px;
        border-bottom:1px solid #d8dadc;

}
ul.main_menu>li:first-child, ul.main_menu>li:hover {
        border-top:none;
        padding-top:1px;
}
ul.main_menu>li>a {
        display:block;
        height:30px;
        width:100%;
        padding-left:32px;
        color:#5b646c;
        background:url(images/menu.png) 5px 9px no-repeat;
        text-decoration:none;
        font-weight:bold;
        white-space:pre;
        overflow:hidden;
}
ul.main_menu>li:hover>a {
        position:absolute;top:-1px;left:0;z-index:1;
        height:37px;
        color:#fff;
        background:url(images/menua.png) no-repeat;
}

Edited April 11, 2011 by rediskavet

[TMGLUK]

Спасибо rediskavet. Перемещение border'а вниз помогло. Кстати я попробовал заменить верхний border на фоновую картинку, но даже она просвечивается.

Отступы, которые появлялись при наводке на пункт были вызваны абсолютным позиционированием. Заменив его на относительное, получилось их избежать. Ссылка становится выше пункта и наезжает на соседний, что в этом случае аналогично position:absolute;.

Вот что вышло: http://atm-book.ru/test/1/new/

Код HTML:

<ul class="main_menu">
 <li><a href="#">Новости</a></li>
 <li><a href="#">Новости</a></li>
 <li class="last"><a href="#">Новости</a></li>
</ul>

Код CSS:

ul.main_menu {
	width:162px;
	margin:0 auto;
	line-height:30px;
}
ul.main_menu>li {
	height:30px;
	border-bottom:1px solid #d8dadc;
}
ul.main_menu>li.last {
	border-bottom:none;
}
ul.main_menu>li>a {
	display:block;
	height:30px;
	width:100%;
	padding-left:32px;
	color:#5b646c;
	background:url(images/menu.png) 5px 9px no-repeat;
	text-decoration:none;
	font-weight:bold;
	white-space:pre;
	overflow:hidden;
}
ul.main_menu>li:hover>a {
	position:relative;top:-1px;z-index:1;
	height:37px;
	color:#fff;
	background:url(images/menua.png) no-repeat;
}

Edited April 12, 2011 by TMGLUK