Make border-right full height of div - css

Question

I had a problem concerning border-right in my menu. This is what it looks like:link I would like to have the border take up the whole blue bar, not extending below
it, but touching the edge at the top. how could I do this? my code is this:
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color- stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:inline-block;
padding:8px 25px 10px 10px;
margin:10px 10px 10px 10px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
min-height:58px;
max-height:58px;
}
#container #header #metaNavi li:last{
border-right: none
My Html is:
<div id="metaNavi">
<ul>
<li id="active">Home</li>
<li>Wir über Uns</li>
<li>Dienstleistungen</li>
<li>Kontakt</li>
</ul>
demo here: http://jsfiddle.net/#&togetherjs=GA5vE7nrgv

Answer 1

you must edit this line #container #header #metaNavi li
add -> line-height: 55px;
remove -> padding: 8px 25px 10px 10px;
add -> padding: 0 25px 0 10px;

Answer 2

Try this CSS:
I removed the margin, adding padding to space along the x-axis and changed min/max-height to just height. Then targeted the active within the list-item so that it is a block level element at 100% width and 58 pixels height. The line-height on the list item, centers it vertically.
#metaNavi:before,
#metaNavi:after {
content: "";
display: table;
}
#metaNavi:after {
clear: both;
}
#metaNavi {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color-stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:block;
float: left;
padding:0 20px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
height:58px;
line-height: 58px;
}
#metaNavi ul li a{
display: block;
width: 100%;
height: 58px;
}
#container #header #metaNavi li:last{
border-right: none
}
#container #header #metaNavi li a{
color:#bf7a30;
text-decoration: none;
}
#container #header #metaNavi #active{
color:#333333;
font-weight:800;
}