Problem with navigation lists

See : http://www.drawtheline.com.au/trial/
I am having prblems with correct css to get the middle navigation to work.
In Netscape:
1. Buttons disappear when rollover
2. Extra padding in "What we do" and Our Services
3. I want the Home button (style class current ) purple background to fill full depth of bar? (also problem in safari?)

Can anyone help, please?

Do I need special hack?

Below is specific css:

#mid-nav { font-size: 90%; background-color: #a1a6a6; margin: 0; padding: 0 0 0 9px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#mid-nav ul { background-color: #a1a6a6; width: auto; height: 17px; overflow: hidden; margin: 0; padding: 0; list-style-type: none; }
#mid-nav li { text-align: center; height: auto; overflow: hidden; float: left; margin: 0 0 0; padding: 0; }
#mid-nav a { color: #fff; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }
#mid-nav a:visited { color: #e3e2e2; text-decoration: none; }
#mid-nav a:active, #mid-nav li a:hover { color: #fff; font-weight: 500; background-color: #531980; text-decoration: none; }
.current { color: #bebebe; font-weight: 400; background-color: #531980; background-position: 0 bottom; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }

Change the mid-nav part of your code to this:



#mid-nav { font-size: 90%; background-color: #a1a6a6; margin: 0; padding: 0 0 0 9px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#mid-nav ul { background-color: #a1a6a6; width: auto; height: 17px; overflow: hidden; margin: 0; padding: 0; list-style-type: none; }
#mid-nav li { text-align: center; height: auto; overflow: hidden; float: left; margin: 0 0 0; padding: 0; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block;}
#mid-nav a { color: #fff; text-decoration: none;}
#mid-nav a:visited { color: #e3e2e2; text-decoration: none; }
#mid-nav li:hover {background-color: #531980;}
#mid-nav a:active, #mid-nav li a:hover { color: #fff; font-weight: 500; background-color: #531980; text-decoration: none; }
.current { color: #bebebe; font-weight: 400; background-color: #531980; background-position: 0 bottom; text-decoration: none; text-align: center; width: 129px; height: 17px; overflow: hidden; padding-top: 0.2em; border-right: 1px solid #fff; display: block; }

That won't work in old version of IE but I will try to come up with a fix for that in a few. This should work for all standards compliant browsers though.

Okay, this should work in past IE versions. There is a little more editing to your code, but it should be better in the long run.

First of all, change your html. For your current tag, wrap it in <a> tags as well.

eg.

<li class="current"><a>HOME</a></li>
<li><a href="index.html">WHO ARE WE</a></li>
<li><a href="index.html">WHAT WE DO</a></li>
<li><a href="index.html">OUR SERVICES</a></li>


And for the CSS, move your #mid-nav below #pict-band

and change your #mid-nav to what I have following.

So it should be:


#pict-band { background-color: #a1a6a6; background-image: url(../images/office5.jpg); background-repeat: no-repeat; background-position: right center; width: 100%; height: 160px; }

#mid-nav {background-color: #a1a6a6; }
#mid-nav ul {list-style-type: none; background-color: #a1a6a6; border-top: 0px solid #fff; border-bottom: 1px solid #fff;}
#mid-nav li {float: left;}
#mid-nav a {color: #ffffff; text-decoration: none; text-align: center; width: 129px; height: 17px; padding-top: 0.2em; border-right: 1px solid #fff; display: block;}
#mid-nav a:hover, .current {color: #ffffff; background-color: #531980;}


And that should do it, also with about 50% of the code you used. :)

Dear thesavior
Thankyou for your wonderful help
Very much appreciated
cheers Rob