проблема с горизонтальным меню в IE7

[alex196]

Подскажите, что я делаю не так

есть горизонтальное меню, во всех браузерах, кроме IE7 нормально отображается:

В IE7 выглядит так:

код:

.top-menu{
	position: relative;
	background-color: #b3b3b3;
	background: url('/img/top-menu-fon.gif') repeat-x;
	height: 41px;
	width: 959px;
	margin-left: 10px;
	overflow:hidden;
}

.top-menu a:link, .top-menu a:visited {
	color: #000;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	padding-top: 12px;
	padding-bottom: 13px;
	padding-left: 60px;
	padding-right: 60px;

	text-shadow: 1px 1px 1px white;
}

.top-menu a:hover, .top-menu a:active {
	background: url('/img/top-menu-fon-hover.gif') 0 0 repeat-x;
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	width: 200px;
	padding-top: 12px;
	padding-bottom: 13px;
	padding-left: 60px;
	padding-right: 60px;
	text-shadow: 1px 1px 1px black;
}

.top-menu ul {
	list-style: none;
	margin:0;
	padding:0;
	display: inline;
}

.top-menu li:first-child {
	border-left: 0px;
}

.top-menu li {
	float:left;
	border-left: 0.0909em solid #656565;
	font-weight:bold;
	height: 41px;
	padding: 0px;
	text-align: center;
	padding-top: 12px;
}

<div class="top-menu"> 
	<ul> 
		<li><a href="/">Пункт 1</a></li> 
		<li><a href="/">Пункт 2</a></li> 
		<li><a href="/">Пункт 3</a></li> 
		<li><a href="/">Пункт 4</a></li> 
	</ul> 
</div>

как я понимаю, не срабатывает padding-bottom

[psywalker]

А где он у тебя тут стоит?

.top-menu li {
	float:left;
	border-left: 0.0909em solid #656565;
	font-weight:bold;
	height: 41px;
	padding: 0px;
	text-align: center;
	padding-top: 12px;
}

[Great Rash]

Для <a> назначьте display: inline-block;

[alex196]

спасибо

[PanSoul]

Для <a> назначьте display: inline-block;

или можно float:left