Extended Menu + sosdmenu + IE = no drop down

Forums    Public Forums    JA Purity    Extended Menu + sosdmenu + IE = no drop down
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • dakke Friend
    December 4, 2008 at 9:39 pm #135950

    I use the ja-purity and have installed the ‘extended menu’ module, in order to display a menu using only images. I created the menu and modified it (check code beneath, full code of ja-sosdmeny.css). It will be no surprise that all works fine in FF, Opera and Safari. IE 6 and 5 do not work (net tested 7, on a mac sorry).
    I’ve been on it for 3 days, found nothing, any help would be greatly appreciated.

    What happens is:
    THe drop down does not show up in IE.

    System:
    * Joomla 1.5.8
    * The extended menu set-up:
    Menu Style: Tree List
    ElementID: yes
    Enable Menu Template: No
    Show menu Icons: Image only (linked) ->
    changing these parameters does not do anything, so my guess is that it is within the css, but no idea where.

    Changing some parameters:
    Changing the css from this

    #ja-mainnav li ul { /* second-level lists */
    display: block;
    position: absolute;
    width: 980px;
    /*
    * Using left instead of display to hide menus because display: none isn't
    * read by screen readers
    */
    left: -999em;
    }

    into this


    #ja-mainnav li ul { /* second-level lists */
    display: block;
    position: absolute;
    width: 980px;
    /*
    * Using left instead of display to hide menus because display: none isn't
    * read by screen readers
    */
    /*left: -999em;*/
    }

    Does show the submenu items, but off course they do not disappear when the mouse is not longer hovering over the menu. So, my hunge is that it has something to do with this part, but again I tried various things and it more looks like guessing than actual understanding the code

    The Style I adjusted in ja-sosdmenu:

    /* Son of Suckerfish Dropdowns
    ---------------------------------------------------------
    Originally developed by Patrick Griffiths and Dan Webb
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    ---------------------------------------------------------
    NOTE: After a deep research, we decide to divide this
    CSS into 2 parts. The first part will define the layout.
    The second part will define the visual look for this menu.
    ---------------------------------------------------------*/

    /*--------------------------- LAYOUT ----------------------------*/
    #ja-mainnav, #ja-mainnav ul {
    padding: 0;
    margin: 0;
    line-height: 20px;
    }

    #ja-mainnav a {
    display: block;
    line-height: 20px;
    margin: 0;
    padding: 10px 20px;
    }

    #ja-mainnav li { /* all list items */
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    }

    #ja-mainnav li ul { /* second-level lists */
    display: block;
    position: absolute;
    width: 980px;
    /*
    * Using left instead of display to hide menus because display: none isn't
    * read by screen readers
    */
    left: -999em;
    }

    #ja-mainnav ul ul a { /* sub-links */

    }

    #ja-mainnav li ul ul { /* third-and-above-level lists */
    margin: -42px 0 0 200px;
    }

    #ja-mainnav li:hover ul ul,
    #ja-mainnav li:hover ul ul ul,
    #ja-mainnav li.sfhover ul ul,
    #ja-mainnav li.sfhover ul ul ul {
    left: -999em;
    }

    #ja-mainnav li:hover ul,
    #ja-mainnav li li:hover ul,
    #ja-mainnav li li li:hover ul,
    #ja-mainnav li.sfhover ul,
    #ja-mainnav li li.sfhover ul,
    #ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;

    }

    /* Individual Submenu items */

    ul#menulist_4 {
    position: relative;
    background-color: #000000;
    right: 140px;
    width: 200px;
    }

    li#menuitem_4_1 {
    position: relative;
    }

    #menuitem_4_2 {
    position: relative;
    float: left;
    }

    #menuitem_4_3 {
    position: relative;
    margin-left: 100px;
    }

    #menuitem_4_4 {
    position: relative;
    float: left;
    }

    /*--------------------------- VISUAL ----------------------------*/
    /* -------- All levels -------- */
    #ja-mainnavwrap {
    border-top: 0px solid #666666;
    background: #fff;
    width: 100%;
    height: 60px;

    }

    #ja-mainnav ul, #ja-mainnav li {
    background-image: none;
    list-style: none;
    }

    #ja-mainnav span.separator {
    display:none;
    }

    /* -------- Top level -------- */
    #ja-mainnav > ul {
    background-color: #000000;
    padding-left: 0px;
    }

    #ja-mainnav > ul > li {
    border-left: 0px solid #666666;
    border-right: 0px solid #333333;
    margin-right: 1px;
    }

    #ja-mainnav > ul > li.active {
    background: url(../images/arrow2.png) no-repeat bottom center #ffffff;
    color: #CCCCCC;
    }

    #ja-mainnav > ul > li:hover,
    #ja-mainnav > ul > li:active,
    #ja-mainnav > ul > li:focus {
    background: url(../images/arrow2.png) no-repeat bottom center #ffffff;
    color: #FFFFFF;
    }

    /* -------- sub-levels -------- */
    #ja-mainnav ul ul li {
    border-left: 0px solid #666666;
    border-right: 0px solid #333333;
    border-top: 0px solid #666666;
    border-bottom: 0px solid #333333;
    margin-bottom: 0px;

    }

    #ja-mainnav li ul { /* second-level lists */
    background-color: #BEC6CE;
    }

    #ja-mainnav li a {
    color: #CCCCCC;
    font-weight: bold;
    text-decoration: none;
    }

    #ja-mainnav ul ul li:hover,
    #ja-mainnav ul ul li:active,
    #ja-mainnav ul ul li:focus {
    background: #fff;
    color: #FFFFFF;
    }

    /*old css*/
    /* Son of Suckerfish Dropdowns
    ---------------------------------------------------------
    Originally developed by Patrick Griffiths and Dan Webb
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    ---------------------------------------------------------
    NOTE: After a deep research, we decide to divide this
    CSS into 2 parts. The first part will define the layout.
    The second part will define the visual look for this menu.
    ---------------------------------------------------------*/

    #ja-mainnav ul.menu {
    margin: 0; /* all lists */
    padding: 0;
    float: left;
    border-right: 0px solid #555555;
    }

    #ja-mainnav ul.menu ul {
    margin: 0; /* all lists */
    padding: 0;
    }

    #ja-mainnav ul.menu li {
    margin: 0; /* all list items */
    padding: 10px;
    float: left;
    display: block;
    background: none;
    cursor: pointer;
    position: relative;
    list-style: none;
    }

    #ja-mainnav ul.menu li ul {
    width: 16.4em;
    position: absolute; /* second-level lists */
    z-index: 99;
    height: auto;
    width: 15.9em;
    }

    #ja-mainnav ul.menu li ul ul {
    margin: -1.5em 0 0 14em; /* third-and-above-level lists */
    }

    #ja-mainnav ul.menu li li {
    padding: 0 1em 0 0;
    margin: 0;
    width: 14.9em;
    }

    #ja-mainnav ul.menu ul a {
    width: 14.8em;
    width: 10.8em;
    }

    #ja-mainnav ul.menu li ul {
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul,
    #ja-mainnav ul.menu li.sfhover ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul, #ja-mainnav ul.menu li.activesfhover ul ul,
    #ja-mainnav ul.menu li.sfhover ul ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul ul, #ja-mainnav ul.menu li.activesfhover ul ul ul {
    left: -999em;
    }

    /* This "unhides" the sub-menus (left: -999em is what hides them) */
    #ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul,
    #ja-mainnav ul.menu li.sfhover ul, #ja-mainnav ul.menu li.parentsfhover ul, #ja-mainnav ul.menu li.parent-activesfhover ul, #ja-mainnav ul.menu li.activesfhover ul,
    #ja-mainnav ul.menu li li.sfhover ul, #ja-mainnav ul.menu li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li.activesfhover ul,
    #ja-mainnav ul.menu li li li.sfhover ul, #ja-mainnav ul.menu li li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li li.activesfhover ul {
    left: auto;
    }

    /* STYLING THE MENU
    -----------------------------------*/
    /* 1st level */
    #ja-mainnav ul.menu li a {
    margin: 0;
    padding: 10px 20px;
    border-left: 0px solid #555555;
    border-right: 0px solid #333333;
    display: block;
    color: #CCCCCC;
    font-weight: bold;
    line-height: normal;
    text-decoration: none;
    }

    #ja-mainnav ul.menu li a:hover,
    #ja-mainnav ul.menu li a:active,
    #ja-mainnav ul.menu li a:focus {
    background: url(../images/arrow2.png) no-repeat bottom center #ffffff;
    color: #1F6691;
    }

    #ja-mainnav ul.menu li {
    margin: 0;
    }

    #ja-mainnav ul.menu li:hover,
    #ja-mainnav ul.menu li.sfhover,
    #ja-mainnav ul.menu li.parentsfhover,
    #ja-mainnav ul.menu li.parent-activesfhover {
    background: url(../images/arrow2.png) no-repeat bottom center #ffffff;
    color: #FFFFFF;
    }

    #ja-mainnav ul.menu li.active a,
    #ja-mainnav ul.menu li.active a:hover,
    #ja-mainnav ul.menu li.active a:active,
    #ja-mainnav ul.menu li.active a:focus {
    background: url(../images/arrow2.png) no-repeat bottom center #ffffff;
    color: #1F6691;
    }

    I did not change anything on the index.php apart from commenting out some parts of the php:
    1. Mask

    <!--<div class="ja-headermask"> </div>-->
    2. Font Size tool

    <!--<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>-->
    3. Footer

    <!--<div id="ja-footer" class="clearfix">-->

    <!--<div id="ja-footnav">
    <jdoc:include type="modules" name="user3" />
    </div>-->

    <!--<div class="copyright">
    <jdoc:include type="modules" name="footer" />
    </div>-->

    <!--<div class="ja-cert">
    <jdoc:include type="modules" name="syndicate" />
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php echo urlencode(JRequest::getURI());?>" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
    <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
    </a>
    <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
    <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
    </a>
    </div>-->

    iamcanadian2222 Friend
    August 7, 2009 at 3:48 am #313583

    I wonder if the same fix that helped me on a different template that had a similar issue would apply here. In my case the sub-menus would show up, but they appeared to be limited to being rendered within the confines of the first drop-down. I saw the fix in another thread on this site and I’m not sure it will solve your issue, but I figure it’s worth sharing the information.

    Take out the following from the cssie.php file:

    #ja-cssmenu li ul {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $template_path;?>/images/trans-bg.png', sizingMethod='scale');
    background-image: none;
    }

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

This topic contains 2 replies, has 2 voices, and was last updated by  iamcanadian2222 15 years, 3 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories