CAn anyone suss out a x browser issue for me? the url is http://www.adclweb.com/dev/st-oseaisland - the main menu needs to stretch to 100% and there needs to be only 1px between each navigation button.

Here's the coding:

#maintab{
padding: 0px 0px 0px 5px;
margin-left: 5px;
margin-right:0px;
margin-top:3px;
margin-bottom: 4px;
font: bold 12px Verdana;
list-style-type: none;
}

#maintab li{
display: inline;
margin: 0px;
padding:0px 2px;
}

#maintab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 0px;
margin-left:0px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
background: #126260;
}

#maintab li a:hover{
color: #FFFFFF;
background: #00A0AF;
}

#maintab li.selected a{ /*selected main tab style */
background-color: #DD7D26;
border-color: #FFFFFF;
}

and here's the html:

  <ul id="maintab">
   <li><a href="home.asp" title="Home"><span class="widthspan">Home</span></a></li>
   <li><a href="addiction.asp" title="Addiction"><span class="widthspan">Addiction</span></a></li>
    <li><a href="grouptherapy.asp" title="Therapy"><span class="widthspan">Therapy</span></a></li>
    <li><a href="facilities.asp" title="Facilities"><span class="widthspan">Facilities</span></a></li>
    <li><a href="expertise.asp" title="Expertise"><span class="widthspan">Expertise</span></a></li>
    <li><a href="press.asp" title="Press"><span class="widthspan">Press</span></a></li>
    <li><a href="testimonials.asp" title="Press"><span class="widthspan">Testimonials</span></a></li>
    <li class="selected"><a href="nextstep.asp" title="Next Step"><span class="widthspan">Next Step</span></a></li>
  </ul>


In IE7 on a pc I can't get it to stretch to 100% with a 1px gap between each and on Safari and Mozilla on a Mac, you get a gap either end (more on the right than the left)

thanks

Adam