The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Just another frustrating compatibility issue… menu issue FF/Chrome/

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #33627

    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!

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



    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).


    #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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.