Css and a mild case of frustration

Question

I'm currently working on a webpage and the lis have a border-right of 1px to act as a separator. However, the border just isn't long enough to do the job.

Here are the segments of code and some screen shots:

Menu HTML

<nav id="home-nav" class="posabs">
 <ul class="nav">
  <li id="hdoc" style="border-right:1px solid #aaa6a0;"><a href=""><span>Original Content</span></a></li>
  <li id="hpnd" style="border-right:1px solid #aaa6a0;"><a href=""><span>Production &amp; Digital</span></a></li>
  <li id="hcns" style="border-right:1px solid #aaa6a0;"><a href=""><span>Commercials &amp; Shorts</span></a></li>
  <li id="hind"><a href=""><span>Distribution &amp; Sales</span></a></li>
 </ul>
</nav>

CSS

<style type="text/css">
#home-nav a span{display:block;background-image:url(../images/guru_silos.png);background-norepeat:0 0;height:52px;text-indent:-9999px;}
#home-nav a{height:104px;}
#hdoc a{width:188px;height:48px;margin-right:35px;}
#hpnd a{width:191px;height:50px;margin-right:35px;}
#hcns a{width:209px;height:52px;margin-right:35px;}
#hind a{width:196px;height:51px;}
#hdoc ul li{border-left:1px solid #aaa6a0;height:50px;}
#hpnd ul li{border-left:1px solid #aaa6a0;height:50px;}
#hcns ul li{border-left:1px solid #aaa6a0;height:50px;}
#hind ul li{border-left:1px solid #aaa6a0;height:50px;}
#hdoc a span{width:188px;background-position:-190px -159px;margin:25px 0 0 14px;}
#hdoc a:hover span{background-position:0px -159px}
#hpnd a span{width:191px;background-position:-211px -105px;margin:25px 0 0 12px;}
#hpnd a:hover span{background-position:-211px -52px}
#hcns a span{width:209px;background-position:0px -53px;margin:25px 0 0 18px;}
#hcns a:hover span{background-position:0px 0px}
#hind a span{width:196px;background-position:-211px 0px;margin:25px 0 0 22px;}
#hind a:hover span{background-position:0px -107px}
</style>

Desired Look

The desired outcome of CSS, from an Illustrator file. Please ignore the missing background.

Current Look

The current results of my CSS and HTML.

Answer 1

advice, please make the CSS more readable then paste it here.

About the problem, what I would do is add this to li line-height: 50px /* any height you want it to be */ then have border-right:1px solid #666; so in this case the border would be 50px which is the height of the block