Just another frustrating compatibility issue… menu issue FF/Chrome/

[Quarrelsome]

First off… I’m a graphics guy drowning in the deeper end of the code pool…

I’m trying to float inline lists for a menu bar and have it scale/expand horizontally to a containing block. The issue is with the rollover background color on the last list item… how to make it scale fully to the edge? I hacked it in FF (so at least it looks right)… and of course it doesn’t work anywhere else… please help!

http://drmohlstrom.com/contact.php

please ignore all the bad code… and thanks for the great site and forum!

Q

[wolfcry911]

Hi, here’s my rendition. I eliminated the extra enclosing divs and the divider div (all unnecessary). I’ve hard-coded the widths of the li because its a fixed width nav. This will keep alignment and allow for user text resizing (up to 4 times in my testing).
html:

Home


The Practice


Dr. Mohlstrom


Chiropractic Care


Contact

css

#main-nav {

width: 870px;

border-top: 10px solid #E1962B;

border-bottom: 1px solid #666;

list-style: none;

margin: 0 auto;

padding: 0;

overflow: hidden; /* or give a height of 32px */

}



#main-nav li {

float: left;

width: 190px;

height: 32px;

line-height: 32px;

border-right: 1px solid #666;

text-align: center;

text-transform: uppercase;

font-size: 1.2em;

}



#main-nav li:hover {

background: #CCC;

}



#main-nav a {

display: block;

color: #666;

text-decoration: none;

}



#main-nav a:hover {

text-decoration: underline;

}



#main-nav span {

color: #E1962B;

}



#main-nav #home {

width: 114px;

border-left: 1px solid #666;

}



#main-nav #chiro {

width: 230px;

}



#main-nav #contact {

width: 140px;

}

also note that I’ve use normal case for the menu text in the source code and capitalized using css.

[Author]

Posts