problem styling navbar with css and php current page indicator

187OnYoAss · 11-06-2011, 09:50 PM

Hey,

I can't wrap my head around this, not sure where to look to fix the problem
So if someone here can point me in the right direction it's greatly appreciated.

The "problem" is that in the menu bar, it indicates the current page but doing so, in every possible way I try to style the menu bar there is no space between the "current" tab and the tab next to it on the right.
also using a background image I can style every tab the same, except for the one that is marked as "current" by the php code. I must be overlooking something?

My html/php code:

Code:

<div id="navbar">
<ul>

<?php
   if ($thisPage=='home')
      {echo '<li class="here">Home';}
   else
      {echo '<li><a href="/">Home</a>';}?> </li>
      
<?php
   if ($thisPage=='News')
      {echo '<li class="here">News';}
   else
      {echo '<li><a href="/">News</a>';}?> </li>
      
<?php
   if ($thisPage=='Archives')
      {echo '<li class="here">Archives';}
   else
      {echo '<li><a href="/">Archives</a>';}?> </li>
      
<?php
   if ($thisPage=='Files')
      {echo '<li class="here">Files';}
   else
      {echo '<li><a href="/">Files</a>';}?> </li>

<?php
   if ($thisPage=='Contact')
      {echo '<li class="here">Contact';}
   else
      {echo '<li><a href="/">Contact</a>';}?> </li>
      
<?php
   if ($thisPage=='Chat')
      {echo '<li class="here">Chat';}
   else
      {echo '<li><a href="/">Chat</a>';}?> </li>
      
<?php
   if ($thisPage=='Forums')
      {echo '<li class="here">Forums';}
   else
      {echo '<li><a href="/">Forums</a>';}?> </li>
</ul>
</div>

The .css

Code:

#navbar {
    clear: both;
    font: Arial,Helvetica,sans-serif;
}
#navbar ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 1000px;
    text-align: center;
}

#navbar li, #navbar ul li.here {
    display: inline;
    margin: 0;
    padding: 0;
}

#navbar a, #navbar ul li.here {
    color: #FFFFFF;
    display: inline;
    padding: 10px 45px;
    width: 40px;
    text-decoration: none;
    text-align: center;
}
#navbar a:hover {
    background-color: red;
 
}
#navbar ul li.here {
    background-color: #859292;
    color: black;
    
}

Hope I stated my problem clearly enough, Thanks in advance

MJ