ThemeShaper Forums » Thematic

[closed]

Help with Cross-Browser CSS Menu Styling Issues

(1 post)
  • Started 9 years ago by kgoodman
  • This topic is not a support question

Tags:

  1. kgoodman
    Member

    Hi -
    Posting this only in an attempt to help others. If you find something wrong, by all means, let me know.

    The Problem:
    CSS Styling of Menu Across Browsers -- 2nd and 3rd level menu items appeared to
    "disappear" in either Safari or Firefox.

    The "Fix":
    I have been going through this for days, sifted through every forum post on the subject and finally made this work across Firefox and Safari. Then I read what Gene said in this post about specificity: adding-active-highlight-to-pages-on-menu. Something clicked.

    I am posting my commented CSS for the "Thematic Skin" navigation in hopes it might help someone. Please note I don't know if this is all that elegant but it works. And I'm glad to not be banging my head anymore.

    Cheers to Thematic, and thanks again to everyone in the forum!
    Kyndra

    /*** THEMATIC SKIN ***/
    .sf-menu {
    border-right:none;
    float:left;
    }
    .sf-menu a {
    border-left:none;
    border-top:none;
    border-bottom:none;
    padding:9px 13px;
    text-decoration:none;
    }

    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #FFF; /***Sets text color of 1st level***/
    }

    .sf-menu li {
    background: #323841; /***Sets background color of 1st level navigation***/
    }
    .sf-menu li li {
    background: #FFF;
    }
    .sf-menu li li li {
    background: #323841;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:#666; /***Sets HOVER background color of 1st, 2nd, & 3rd levels***/
    outline: 0;
    border-bottom-color:#ccc;
    }
    .sf-menu ul {
    border-right:none; /*** removes borders from 2nd level and below*/
    border-bottom:none;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    background:#323841; /***Sets background color (NON-hover) 2nd level & below ***/
    border-bottom:none;
    color:#FFF; /*** sets text color of 2nd level NON current page in Safari so it doesn't "disappear" ***/
    }
    .sf-menu ul a:hover {
    color:#FFF; /***Sets text color for hover color 2nd level & below ****/
    }

    .sf-menu .current_page_item a,
    .sf-menu .current_page_item a:visited,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    color:#FFCC33; /*** Sets text color of current menu page *** /
    }

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.