CSS list border bottom spacing issue - php

Question

I am having issues with this bit of CSS and I can't seem to find it out.
I have a bit of PHP:
<ul>
<?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?>Home</li>
<?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?><li>About</li>
<?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?><li>Contact</li>
<?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?><li>Projects</li>
<?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?><li>Sites</li>
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li>Demo</li>
</ul>
Now, on each page it will define $page. The issue is when a page is active it displays a bar underneath the item. The bar is floating to the right side of the page and the home item is on the far right. If that one is active then it works just fine. When any of the other items are active then the line is to the left. Here is my CSS:
#header {
position:fixed;
background:#222;
color:#999;
width:100%;
margin:0px;
padding:0px;
top:0;
z-index:1;
height:5%;
}
#header ul li{
display: inline;
margin:0;
float:right;
display:block;
padding:5px 10px;
}
#header .active{
border-bottom: solid 3px orange;
}
Right
Wrong
I know it has something to do with the spacing but I just can't figure it out. I'm not a CSS guy.

Answer 1

I am guessing that you are outputting more than the needed <li> tags
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li>Demo</li>
this will either output
<li class='active'>
<li>Demo</li>
or
<li>
<li>Demo</li>
So to see if this is the problem use this
<ul>
<?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?>Home</li>
<?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?>About</li>
<?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?>Contact</li>
<?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?>Projects</li>
<?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?>Sites</li>
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?>Demo</li>
</ul>