Проблемы оформления меню

[maa]

Здравствуйте, ребята.

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

Меню организовано стандартным образом - списком. Левая граница меню оформлена как изображение прибитое к левому краю ul. Между пунктами меню разделители оформлены в виде изображений прибитых к правому краю li:

<ul>
 <li><a href="#" >ГЛАВНАЯ</a></li>
 <li><a href="#" >ГЛАВНАЯ</a></li>
 <li><a href="#" >ГЛАВНАЯ</a></li>
 <li><a href="#" >ГЛАВНАЯ</a></li>
 <li><a href="#" >ГЛАВНАЯ</a></li>
 <li><a href="#">БАЗА ГЛАВНАЯ</a></li>
 <li class="menu_rb" ><a href="#">RED ГЛАВНАЯ</a></li>
</ul>

#menu ul{
	height:57px;
	background:url(../img/menu_lbrd.png) left no-repeat;
	border-right:1px solid green;
	}
#menu li{
	float:left;
	line-height:57px;
	background:url(../img/menu_lbrd.png) right no-repeat;
	list-style:none;
	}
#menu li a{
	text-decoration:none;
	color:#385600;
	padding:20px 30px;
	}
#menu li a:hover{
	background:url(../img/menu_hover.png) repeat-x;
	color:#fff;
	}
#menu li.menu_rb a{
	background:url(../img/menuRB_bg.png) repeat-x;
	color:#385600;	
	}

На выходе имею вот что:

http://clip2net.com/s/1PoXL

http://clip2net.com/s/1PoZk

http://clip2net.com/s/1Pp1T

Проблемы:

1. Последняя li и правая граница ul имеют зазор. На сколько я представляю, ul должен обтягивать лишки. Почему возникает этот зазор?

2. На hover стоит заполнение цветом(репитится картинка). При этом забивается разделитель-изображение в li, а в первом и левая граница ul.

Как мне реализовать меню так, чтобы разделители не забивались заливкой на hover?

Полагаю, что проблема здесь не в оформлении, а в логике.

[v01d0s]

1) ul растягивается на всю ширину, а все li занимают ширину = своему содержимому. У вас просто остаётся пустое место в конце ul ничем не занятое.

2) Я бы эти разделители реализовал с помощью бордеров для li.