Need help Explore and Firefox CSS navigation sticks. Safari works fine.

Discussion in 'Web Design and Development' started by ozlow, Apr 6, 2009.

  1. ozlow macrumors member

    Joined:
    Aug 18, 2003
    Location:
    pacific NW
    #1
    Hello,

    I really need some help my CSS is sticking in Explore and Firefox, but not in Safari.

    Here is a link to the website...
    http://agpom.org/AgpomWebTesting/website.html

    Below is the CSS code. I'd really love any help. This is my first venture into CSS. Thanks.

    ~oz.


    @charset "UTF-8";

    /* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

    /*******************************************************************************

    LAYOUT INFORMATION: describes box model, positioning, z-order

    *******************************************************************************/

    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: 213px;
    height: auto;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
    {
    list-style-type: none;
    position: relative;
    cursor: pointer;
    background-image: url(../images/navigation_background.jpg);
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    top: auto;
    }
    /* Submenus should appear slightly overlapping to the right (100%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    {
    margin: -5% 0 0 100%;
    padding: 0;
    list-style-type: none;
    font-size: 0;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 152px;
    left: -1000em;
    top: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-stretch: normal;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    {
    left: 0;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    {
    width: 152px;
    clear: inherit;
    float: right;
    }

    /*******************************************************************************

    DESIGN INFORMATION: describes color scheme, borders, fonts

    *******************************************************************************/

    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    {
    border: 0px solid #CCC;
    }
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    {
    border: 1px solid #4D8935;
    }
    /* Menu items are a green block with padding and no text decoration */
    ul.MenuBarVertical a
    {
    display: table;
    cursor: pointer;
    color: #FFFFFF;
    font-style: normal;
    text-decoration: none;
    text-indent: 4px;
    padding: 0em;
    vertical-align: bottom;
    white-space: normal;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    height: 100%;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12;
    line-height: 22px;
    font-weight: lighter;
    font-variant: normal;
    text-transform: none;
    }
    /* Menu items that have mouse over or focus have a green background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    {
    color: #FFF;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 22px;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a green background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    {
    background-color: #4D8935;
    color: #FFF;
    }

    /*******************************************************************************

    SUBMENU INDICATION: styles if there is a submenu under a given menu item

    *******************************************************************************/

    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (90%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
    {
    background-repeat: no-repeat;
    background-position: 85% 33%;
    }

    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 90% 33%
    }

    /*******************************************************************************

    BROWSER HACKS: the hacks below should not be changed unless you are an expert

    *******************************************************************************/

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    {
    position: absolute;
    z-index: 1010;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarVertical li.MenuBarItemIE
    {
    display: inline;
    f\loat: left;
    background: #769A59;
    }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I don't see anything wrong using Safari 4b. I will note though, that if you view the page with JavaScript disabled (as I do), the sub-menus in the navigation block content on the page.
     

Share This Page