Results 1 to 3 of 3

Hybrid View

  1. #1
    Join Date
    Feb 2007
    Location
    South Florida, USA
    Posts
    1,374
    Plugin Contributions
    4

    Default Stylesheet of CSS flyout menu

    Before anybody points out that this thread would be better posted in the add-on specific thread, let me explain that the original creator of the module, DrByte, does not offer support for this module (no offense meant, Doc, probably very busy).
    This contrib was later updated by Get Em Fast, who also deserted it, so I am hoping to reach a larger audience of stylesheet gurus who can help me out.
    The contrib works fine in IE7 and FF, though barely in IE6.
    You can take a look at the site in the sig to see what I mean.
    Also, in the support thread http://www.zen-cart.com/forum/showth...=686768&page=9 you will find more info on tweaks I had to make to the stylesheet to achieve something barely visible in IE6.
    There is no hover functionality in IE6, although the file that produces the hover (csshover.htc) is correctly called in the stylesheet, but this is an issue that I will address later.
    For the moment, let's focus on the style thing.
    An element "a" with these ancestors:
    html
    body #indexBody
    div #mainWrapper
    table #contentMainWrapper
    tbody
    tr
    td #navColumnOne .columnLeft
    div #navColumnOneWrapper
    div #categoriescss .leftBoxContainer
    div #nav-cat
    ul .level1
    li
    is breaking the sidebox (information taken from Web Dev toolbar).Web Dev reports that this element has
    Width: 160pxHeight: 28px
    however I have specified a different size for it in the stylesheet.
    Next comes the relevant stylesheet.
    If anybody can make sense of it, I'd greatly appreciate it and so would the other users of this contrib.
    Thanks in advance.

    -----------------------------------------------------

    body {
    behavior: url(../../../csshover.htc);
    /* WinIE behavior call */}

    div#nav-cat {
    width: 150px;
    margin: 0;
    background-color: transparent;
    font-weight:bold;
    text-align: left;
    line-height: 20px;
    }
    div#nav-cat ul {
    margin: 0;
    padding: 0;
    width: 150px;
    background-color: transparent;
    }

    div#nav-cat ul.level2 {
    margin-left: 5px;
    padding: 0;
    width: 150px;
    background-color: transparent;
    border: none;
    }

    div#nav-cat ul.level3 {
    background-color: transparent;
    }

    div#nav-cat ul.level4 {
    background-color: transparent;
    }

    div#nav-cat ul.level5 {
    background-color: transparent;
    }

    div#nav-cat ul.level6 {
    background-color: transparent;
    }
    div#nav-cat li {
    background-image: url(../images/b1.gif);
    background-repeat: no-repeat;
    position: relative;
    list-style: none;
    margin: 0;
    z-index: 20;
    height: 20px;
    width: 150px;
    /* change it to whatever space you want to put space between buttons*/}
    /* <---this line may help or hinder IE menu shifting issues */
    div#nav-cat li li {
    margin: 0px;
    /* this overrides the margin-top in the declaration above */
    }

    div#nav-cat li:hover {
    background-image: url(../images/b1_over.gif);
    }

    div#nav-cat li.submenu {
    background-color: transparent;
    }

    div#nav-cat li.submenu:hover {
    background-color: transparent;
    }

    div#nav-cat ul {
    background-color: transparent;
    }

    div#nav-cat li a {
    display: block;
    padding-bottom: 8px;
    padding-left: 10px;
    text-decoration: none;
    width: 150px;
    /*border-left: 0.5em solid #BBB;}
    div#nav li a:hover {border-left-color: red;}*/
    }

    div#nav-cat li a:hover {
    border: none;
    }

    div#nav-cat>ul a {
    width: 150px;
    }

    div#nav-cat ul ul {
    position: absolute;
    top: 0;
    left: 150px;
    display: none;
    }
    div#nav-cat ul.level1 li.submenu:hover ul.level2,
    div#nav-cat ul.level2 li.submenu:hover ul.level3,
    div#nav-cat ul.level3 li.submenu:hover ul.level4,
    div#nav-cat ul.level4 li.submenu:hover ul.level5,
    div#nav-cat ul.level5 li.submenu:hover ul.level6 {
    display:block;
    }

  2. #2
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,021
    Plugin Contributions
    3

    Default Re: Stylesheet of CSS flyout menu

    I know this isn't the answer you're looking for, but as added info, I don't worry about IE6 anymore. I don't even have it installed anywhere.

    IE7 is stable (if a little goofy sometimes) and has been around long enough that Windows users should have it by now.

    One of my sites, for example, 61.5% IE7, 21.5% IE6, and the people likely to visit that site aren't going to be all that computer knowledgable.

    I'd bet that a better cross-section would show < 10% IE6. Not worth jumping through a lot of hoops for, IMO.

  3. #3
    Join Date
    Feb 2007
    Location
    South Florida, USA
    Posts
    1,374
    Plugin Contributions
    4

    Default Re: Stylesheet of CSS flyout menu

    Thanks for quick answer.
    Granted, but overall stats still showing 30% users for that goddam browser, which I absolutely loathe.
    However, my personal preferences have nothing to do with my marketing campaign.

 

 

Similar Threads

  1. layout changed after installed CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Feb 2014, 04:02 PM
  2. v151 How to uninstall CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 15 Feb 2014, 07:39 AM
  3. css flyout header stylesheet customization
    By kbalona in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 8 Jun 2007, 12:25 AM
  4. Css Flyout Menu
    By johnny43 in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 14 Jul 2006, 08:17 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg