Пропадает margin в ie8, как исправить?

[ankoch]

Подскажите пожалуйста как исправить ситуацию.

Есть проблема с отображением левой колонки (меню) на сайте именно в ie8 (в opera, ff, GChr и даже ie6, ie7 - все нормально). При наведении курсора на любой из пунктов меню всё меню смещается вверх, несмотря на заданный для него margin (ul#vmenu.menu{margin: 5px 0 10px;}), то есть исчезает пробел, показанный на картинке.

Прилагаю скрин

HTML:

<div class="123">
	<h3>Разделы сайта</h3>
	<ul id="vmenu" class="menu">
		<li class="item1">
			<a href="/chto-to">
				<span class="leviy"></span>
				<span class="ssilka">Что-то</span>
				<span class="praviy"></span>
			</a>
		</li>
		<li class="item2">
			<a href="/esche-chto-to">
				<span class="leviy"></span>
				<span class="ssilka">Ещё что-то</span>
				<span class="praviy"></span>
			</a>
		</li>
	</ul>
</div>

CSS:

/* Vertikalnoe menu */

#vmenu li a span.ssilka, #vmenu li a span.ssilka{
	background: url("../images/vmenuitem.png") no-repeat scroll 0 0 transparent;
	color:#2B3617;
	display: block;
	height:28px;
	text-decoration: none;
}

#vmenu li a span.praviy{
display:block;
height:2px;
}

#vmenu a{
text-decoration: none;
}

#vmenu a:link, #vmenu a:visited{
	text-shadow:1px 1px 1px #FFFFFF;
}

#vmenu li#current a span.ssilka, #vmenu.menu li.active a span.ssilka{
	background: url("../images/vmenuitem.png") no-repeat scroll 0 -56px transparent !important;
	color: #576C2D;
	text-decoration: none;
}

#vmenu li a span.ssilka:hover, ul#vmenu.menu li#current a span.ssilka:hover, #vmenu li a span.ssilka:active{
	background: url("../images/vmenuitem.png") no-repeat scroll 0 -28px transparent !important;
	color: white;
	text-decoration: none;
	text-shadow: none !important;
}

ul.menu{
	list-style-type: none;
	padding: 0;
}

#vmenu.menu ul{
margin:10px 0;
padding:0 0 0 14px;
}

#vmenu span{
	display:block;
	padding:0 0 0 15px;
	line-height:28px;
}

#vmenu.menu li{
	margin-bottom: 0px !important;
	display: block;
}

.123 h3{
background:url("../images/vmenublockheader.png") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
display:block;
font-size:16px;
line-height:30px;
margin:0px;
text-align:center;
text-shadow:1px 1px 1px #555555;
}

ul#vmenu.menu{
	margin: 5px 0 10px;
}

#vmenu.menu li ul li a span.ssilka, #vmenu.menu li#current ul li a span.ssilka{
	background: none repeat scroll 0 0 transparent !important;   
	line-height:14px;
	height:14px;
	padding: 2px;
}

#vmenu.menu li ul li a span.ssilka:hover, #vmenu.menu li#current ul li a span.ssilka:hover, #vmenu.menu li ul li#current a span.ssilka:hover{
	color:#576C2D;
	text-decoration: none;
}

#vmenu.menu li ul li{
	list-style:none;
	padding-left:16px;
	height:20px;
}

#vmenu.menu li ul li#current{
	background:url("../images/marker-krasniy.png") no-repeat 0 center !important;
}

#vmenu.menu li ul li:hover{
	background:url("../images/marker-zeleniy.png") no-repeat 0 center;
}

#vmenu.menu li ul li#current a span.ssilka{
	background: none repeat scroll 0 0 transparent !important;
	line-height:14px;
	height:14px;
	padding: 2px;
	text-decoration: none;	
}

#vmenu.menu li.active ul li a span.ssilka, #vmenu.menu li ul li#current a span.ssilka:hover, #vmenu.menu li ul li a span.ssilka:hover, #vmenu.menu li#current ul li a span.ssilka:hover{
	color:#576C2D;
	background: none repeat scroll 0 0 transparent !important;
}

/* Vertikalnoe menu - KONETS*/

Edited December 18, 2010 by ankoch

[psywalker]

а дай ка ссылочку

[ankoch]

а дай ка ссылочку

psywalker, спасибо что откликнулся, к сожалению сайт на локалке, поэтому ссылки в сети нет. Сейчас на рабочей копии сайта, которая в сети другой шаблон (речь идёт о Joomla), а этот шаблон готовлю ему на смену.

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

[rus]

подозреваю что в a:hover нет того же условия отступа как и для <a>.

[Vlad]

Кажется речь идет про этот баг

http://www.inventpartners.com/content/ie8_margin_top_bug

[eVErl@Sting]

Без полного кода страницы, css и картинок меню, трудно что либо сказать…с теми кусками кода что ты дал, все работает нормально у меня в ИЕ8

[ankoch]

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

Vlad попробовал тот способ - проставил float:left; и clear:both; для ul#vmenu.menu и .moduletablevmenu h3 - не помогло, наверное потому, что в той ситуации для дивов был замечен баг, а у меня h3 и ul.

rus дело в том, что я для "а" вообще не задаю margin, а задаю для h3 (пробовал наоборот - задавать отступ для ul, а не для h3 - тот же результат).

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

Edited December 20, 2010 by ankoch

[rus]

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

[ankoch]

Ребят, всем большое спасибо за участие и дельные советы!

В общем покрутил, повертел и выкинул нафиг я всю эту глючную ерунду, которая у меня получилась, так и не поняв, чего там было не так как нужно. Сверстал заново и всё ОК.

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