[css-d] CSS horizontal nav bar problem

[Darren Jordan]

Hi All.

I am doing a horizontal nav bar. The problem I have is that the links are too 
long, and the client will not change them.

The site width is 900px. How can I get the background colour to be the same 
height on all the links.
Say the "About Us" link only takes up one line of background colour, but the 
"Community Based Youth Initiatives" link takes two
lines of colour. I tried the <br /> but it looks stupid.

Code below;

Thanks
Darren

<div id="mainNav">
   <ul>
      <li id="aboutUs"><a href="index.htm" class="first">About Us</a></li>
      <li id="localEmploymentServiceNetwork"><a 
href="localEmploymentServiceNetwork.htm">Local Employment Service 
Network</a></li>
      <li id="servicesToTheUnemployed"><a 
href="servicesToTheUnemployed.htm">Services to the Unemployed</a></li>
      <li id="communityDevelopment"><a 
href="communityDevelopment.htm">Community Development</a></li>
      <li id"communityBasedYouthInitiatives"><a 
href="communityBasedYouthInitiatives.htm">Community Based Youth 
Initiatives</a></li>
    </ul>
  </div>


@charset "UTF-8";
/*----- basic styling----*/
* {
 margin: 0px;
 padding: 0px;
 }

body {
  background-color:#006699;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:85%;
  }
#wrapper {
  position:relative;
  width:900px;
  margin:0 auto;
  text-align:left;
  background:#FFFFFF url(../images/logo/sideBarBG.gif) repeat-y;
  }
/*----- position container elements -----*/  

#header {
  position:relative;
  background: #ffffff url(../images/logo/mainLogo.jpg) no-repeat top left;
  height: 120px;
  }
#header h1 {
  margin-left: -9000px;
  }
/*--- main navigation bar --*/  
#mainNav {
  float:left;
  width: 900px;
  }
#mainNav ul {
  margin:0;
  padding:0;
  list-style:none;
  float: left;
  }
#mainNav li {
  float: left;
  } 
#mainNav li a:link,#mainNav li a:visited {
  display:block;
  background:#000066;
  padding: .2em .5em;
  text: bold 1em/1.2 Georgia, "Times New Roman", Times, serif;
  text-decoration:none;
  color:#FFFFFF;
  margin-right: .5em;
  }
#mainNav li a:hover,#mainNav li a:active {
  color: #006699;
  background:#FFFFFF;
  }
#content {
  float:right;
  width:600px;
  }
#sidebar {
  float:left;
  width: 250px;
  }
#footer {
  color:#FFFFFF;
  font: .8em Verdana, Arial, Helvetica, sans-serif;
  background:#000000;
  margin-top: 5em;
  }
#clear {
  clear:both;
  }
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/