Full Width Menu

[bam720]

I am trying to use the sonofsuckerfish drop down menu. Its working fine in IE and FF, but in IE it's not taking up 100% width on the page. My FF is using a Serif by default to render fonts (which takes up the 100% using the auto width), whereas IE is something else. If I force the serif it still doesn't match up in IE. My plan is to try to put a green background for the entire bar and then put auto'd margins on the left and right to center it. (I think it's the float left causing issues.) I can not get that to work. What am I missing? Thanks.

body { 
  background-color:#FFFFFF; 
  color: #999999; 
  text-align:center;
  width:910px;
  margin: 0 auto;
  border:1px solid #b5e547;
  font-size: 76%;
}

/* Menu Styles */
#menu {
  width: 100%;
  background: #498d09;
  margin: 0 auto;
}

#nav, #nav ul {
  font-family: tahoma;
  font-weight: normal;
  padding: 0;
  margin: 0 4px;
  list-style: none;
}

#nav li {
  float: left;
  width: auto;
  background: #498d09;
}

#nav a {
  display: block;
  width:auto;
  color: #FFFFFF; 
  text-decoration: none;
  background: #498d09;
  padding: 5px 18px;
}

#nav a:hover{
  background: #b5e547;
}

#nav li ul {
  position: absolute;
  width: 250px;
  left: -999em;
  background: #498d09;
  text-align:left;
}

#nav li:hover ul, #nav li.sfhover ul{
  left: auto;
  font-size: 8pt;
}

#nav li ul li{
  width: 100%;
  background: #b5e547;
}


and

<div id="menu">
  <ul id="nav">
    <li><a href="">About</a></li>
    <li><a href="">Solutions by Need</a></li>
    <li><a href="">Solutions by Technology</a>
      <ul>
        <li><a href="">Accounts Payable Automation</a></li>
        <li><a href="">Accounting Firms</a></li>
      </ul>
    </li>
    <li><a href="">Services</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Clients</a></li>
    <li><a href="">Resource</a></li>
    <li><a href="">Events</a></li>
    </ul>
    <br>
</div>
<br>
<div style="clear:both;"></div>

 

[BigRed1212]

This makes it go all the way across in IE6. What does it make things do in FF? I don't have access to it at the moment and can't see.

body { 
  background-color:#FFFFFF; 
  color: #999999; 
  text-align:center;
/*  width:910px; */
  margin: 0 auto;
  border:1px solid #b5e547;
  font-size: 76%;
}

 

[bam720]

I do not see it making a difference in either browser

 

[bam720]

In my local copy of CSS I had an "a hover" (just like that) before my menu declaration throwing it all off. Thanks CSS Validator

 

[Vragabond]

1. Why do you expect Serif font? Your font should be Tahoma in both browsers, as specified in the #nav, #nav ul rule (although the #nav ul portion of that rule refers only to the submenu, since that is the only ul within the #nav element).

2. Your list (ul) should be stretched across the screen. Your list items (li) are floated and as such have an auto width (as much as the content inside them). That means that if I make the font larger, the menu won't fit in one line and if I make it smaller, the menu won't fill the entire line. That said, your menu should look the same provided both browsers use the same font (and if you're comparing FF and IE6, some IE6 bugs might need to be addressed).

So really, your only question is, why are you not seeing the same font in both browsers.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[dlshield]

Here are my versions, works fine for me in all browsers
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 159px;
color: white;
text-align: center;
}

#nav li {
float: left;
width: 159px;
background-color: navy; /*overall menu background color*/
}

#nav li ul {
position: absolute;
width: 159px;
left: -999%;
}

#nav li:hover ul{
left: auto;
}