Вопрос по горизонтальному меню

[ProGirl]

Вопрос по горизонтальному меню

Надо сделать меню как на картинке, на всю шируна сайта (1000px). Как не пытался, не получается сделать его так, чтобы занимал всю шируну и отступы боковые были одинаковые. Каким способом лучше сделать и как?

И еще вопрос, как сделать границу боковую как на картинке?

[Softlink]

Таблицей.

[ProGirl]

Таблицей.

А боковую границу как сделать, как на картинке?

Edited April 30, 2012 by ProGirl

[mrnobody]

Таблицей.

А боковую границу как сделать, как на картинке?

Пока только так получилось

http://jsfiddle.net/CPzGW/1/

Edited April 30, 2012 by mrnobody

[ProGirl]

Таблицей.

А боковую границу как сделать, как на картинке?

Пока только так получилось

http://jsfiddle.net/CPzGW/1/

Спасибо, сейчас попробую помучать Буду благодарен еще какой-нибудь помощи

[ProGirl]

ul#menu{

	margin		: 0;
	padding		: 0;
	display		: table;
	width		: 100%;
	border-right	: 1px solid #fff;
}

#menu li{
	display		: table-cell;
	text-align	: center;
	width		: auto;


}

*html #menu li{
    width:auto;
	display		: inline;
	zoom		: 1;
}

#menu a:link, #menu a:hover, #menu a:visited{
	display		: block;
	background  : #336699;
        padding		: 5px 20px;
	font		: 16px Arial;
        border-right: 2px solid #3D92BC;
	color		: #fff;
	text-decoration	: none;
        border-top: 5px solid #3D92BC;
}

 #menu a:hover{
	background: #fff;	
        border-top: 1px solid #3D92BC;
        border-bottom: 1px solid #3D92BC;
        color:#3D92BC;

}

 <ul id="menu">
	<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>
</ul>

Вроде сделал, но остался вопрос с боковой границей, как её сделать? И IE6-7 неправильно отображает страницу, в чем проблема?

[ruslan.savenok]

display: table;

и

display: table-cell;

не работают в этих браузерах, не стесняйтесь и используйте html теги table > tr > td

[ProGirl]

Народ, еще раз вернусь к данному выше в шапке меню.

Как сделать что бы при наведении курсора кнопка не съезжала вверх, а оставалась на месте(просто исчезала верхняя граница)?

http://jsfiddle.net/ProGirl/BqHYr/

Edited May 8, 2012 by ProGirl

[alexforce2]

замените последний блок в css(предоставленный по ссылке http://jsfiddle.net/ProGirl/BqHYr/) на следующий

#navigation a:hover {
    background      : #fff;
    color            : #369;
    border-top:5px solid transparent;
}