border больше размера div

[gladyshef]

имеем горизонтальное меню, текст в 14px, див меню 14х660px, почему то добавляются по паре пикселей, пробовал педдинг 0, ничего не изменилось, border все равно выше текста,

прилагаю код

наглядно тут: http://jsfiddle.net/JdvXd/

#header {
	background-color: #FFF;
	height: 34px;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#menu{
	margin:0;
	padding:0px;
	height: 14px;
	width: 660px;
	position: relative;
	float: right;
	top: 7px;
	}
.menu a {

	font-family: "Century Gothic";
	font-size: 14px;
	text-decoration: none;
	color: #2a2a2a;
	display: inline;
	float: right;
	padding-left: 5px;
	padding-top: 0px;
	border-right-style: double;
	border-right-color: #cde5e2;
	border-right-width: 1px;
	padding-right: 5px;
}
.menu a.podcherk {
	color: #7ac5f2;
	text-decoration: underline;
}
.menu a:hover {
	color:#7ac5f2;
	}
.menu a:hover.podcherk {
	color:#FC0;
}

html

<div id="menu">
  <div class="menu">
<a href="http://#">Контакты</a>
<a href="http://#">Наглядно</a>
<a href="http://#" class="podcherk">Услуги и прайс</a>
<a href="http://#">Вам о нас</a>
</div>

  </div>

Edited November 8, 2012 by gladyshef

[gladyshef]

вот тут наглядно http://jsfiddle.net/JdvXd/

разделители между пунктами меню (|-вот такие) они больше текста, хочу добиться что бы был такого же размера как и высота шрифта, что не так делаю?

[SelenIT]

Размер шрифта (кегль) не равен высоте прописных букв (там еще резервируется место под выносные «хвостики», диакритические знаки типа точек над Ё и т.п.). Придется подгонять точный размер для конкретного шрифта.

[gladyshef]

у меня как то странно, заметь снизу меньше запас чем сверху достаточно на много

а как другими средствами можно реализовать их?

еще интересно как последнюю палочку удалить?) все справа ставятся

Edited November 8, 2012 by gladyshef

[rikimaru2013]

.menu a {height:20px;}

И точно по средине - проверено красным бекграундом

[gladyshef]

.menu a {height:20px;}

И точно по средине - проверено красным бекграундом

что то попробовал, не получилось(

[Catherine]

В данном случае можно попробовать прописать line-height. Пример.

а как другими средствами можно реализовать их?

еще интересно как последнюю палочку удалить?) все справа ставятся

Можно реализовать при помощи псевдоэлементов. Вариант один, вариант два.

Удалять разделитель у первого/последнего элемента можно, используя псевдоклассы :first-child и :last-child, либо вешать класс на нужный элемент списка и перепрописывать стили для него.