Верхняя менюшка на списках

[2pick]

Пытаюсь смострячить верхнюю менюшку на списках...
html:

    <div class="topmenu_cont">
    	<div class="topmenu_menu">
        	<div id="left_ogr"></div>
            <div id="centr_ogr">
            	<ul>
                <li><a href="#"><span id="left_hov"></span><strong>Главная</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>О компании</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Продукция и услуги</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Полезная информация</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Фотогалерея</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Контакты</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Скачать</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Калькулятор</strong><span id="right_hov"></span></a></li>
                <li><a href="#"><span id="left_hov"></span><strong>Где купить</strong><span id="right_hov"></span></a></li>
		<li><a href="#"><span id="left_hov"></span><strong>Отзывы и предложения<span id="right_hov"></span></a></li>
                </ul>
            </div>
            <div id="right_ogr"></div>
        </div>
    </div>

css:

.topmenu_cont{
	width:1221px;
	height:55px;
}

.topmenu_cont .topmenu_menu{
	padding-top:5px;
}

.topmenu_cont .topmenu_menu #left_ogr{
	background:url(images/topmenu_lo.gif) no-repeat;
	width: 10px;
	height:50px;
	float:left;
}

.topmenu_cont .topmenu_menu #right_ogr{
	background: url(images/topmenu_ro.gif) no-repeat;
	width: 10px;
	height:50px;
	float:left;
}

.topmenu_cont .topmenu_menu #centr_ogr{
	height:50px;
	float:left;
}

.topmenu_cont .topmenu_menu ul{
	padding-left: 0px;
	padding-top: 0px;
	margin: 0px;
	background-color:#da251c;
	height:100%;
}

.topmenu_cont .topmenu_menu ul li{
	display:block;
	list-style:none;
	float: left;
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight:bold;
	text-transform:uppercase;
	height:100%;
	color:#FFF;
	border-left:double;
	border-left-color:#ee4e46;
	border-left-width:3px;
	min-height:48px;
	max-height:48x;
	max-width:140px;
	text-align:center;

}

.topmenu_cont .topmenu_menu ul li #left_hov{
	display: block;
	width: 12px;
	height:50px;
	float:left;
}

.topmenu_cont .topmenu_menu ul li a{
	text-decoration:none;
}

.topmenu_cont .topmenu_menu ul li:hover #left_hov{
	background:url(images/topmenu_lh.gif) no-repeat;
}

.topmenu_cont .topmenu_menu ul li #right_hov{
	width: 12px;
	height:50px;
	display:block;
	float:left;
}

.topmenu_cont .topmenu_menu ul li:hover #right_hov{
	background:url(images/topmenu_rh.gif) no-repeat;
}


.topmenu_cont .topmenu_menu ul li strong {
	display: block;
	float:left;
	height: 40px;
	text-decoration:none;
	padding-top:10px;
	color:#FFF;
}

.topmenu_cont .topmenu_menu ul li:hover strong {
	text-decoration:underline;
	color:#000;
}

.topmenu_cont .topmenu_menu ul li:hover strong {
	background: url(images/topmenu_ch.gif) repeat-x;
}

Нужно, чтоб при наведении выделялось белой рамкой со скругленными углами: справа topmenu_rh.gif, слева topmenu_lh.gif.
Проблема в том, что если текст переносится во 2-ю строчку то все слетает (точнее скрывается)... остается только скругление углов слева, а сам текст и скругление справа - пропадает.
Пытался сделать скругление меньшим размером. Убирать отступы сверху у стронга. - та же ситуация
Текст не убирается, если тэги с отступом(скруглением) убрать вообще

 

[AlexMist]

Во-первых повторение <span !!!id="right_hov"> не валидно, id должен быть уникальным, замени на класс (это не должно сказываться на отображении).
Во вторых изначально не правильный подход. span если и нужен то только 1 и весь текст ссылки должен быть в нем.
А использовать для изменения фона нужно :
li:hover
li:hover a
li:hover a span
Текст в 2 строки входит по высоте в li (line-height не мешает)?
Можно посмотреть как устроено в любом буржуйском шаблоне HTML/CSS.
ps: выложи скриншет что там съезжает

 

[2pick]

Если честно то идею я свистнул у 2domains.ru... После авторизации менюшка рабочая таким же образом сверстана.
li:hover
li:hover a
li:hover a span
использовать без указания класса не целесообразно, ибо еще есть левое меню, которое строится так же на списках
Для просмотра ссылки Войди или Зарегистрируйся
3,4 И 10-е пункты слетают. На 3-й пункт мышку навел
Для просмотра ссылки Войди или Зарегистрируйся
Вот куда съезжает