We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 31039
    • 49 Posts
    I’ve got a website http://www.cayeaccommodations.com/

    the problem is that in IEv7 or Firefox things are COOL ... but look at the site in IEv6 or less and the menu won’t show

    I can get the menu to work if i "unhide" a page ... but i don’t want that page to be show in the menu ... i’ve tried selecting the menu option to turn off ... i’ve also tried using wayfinder to exclude the page but both don’t work

    any ides? huh
      • 4310
      • 2,310 Posts
      I think your chunk {{cssplay_revParentRow}} is incomplete, it’s not outputting the conditional IE6/7 stuff.
      Try this for the CSS Play Ultimate Drop Down menu
      <li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      
      [+wf.wrapper+]
      
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      
      </li>


      David
        • 31039
        • 49 Posts
        Just tried the code ... but it didn’t work ...

        the call i’m using is:

        [[Wayfinder? &startId=`0` &excludeDocs=`22` &parentRowTpl=`cssplay_revParentRow` &cssTpl=`cssplay_ultdrop` ]]

        hpoe this might help some more? it all seems very strange?
          • 4310
          • 2,310 Posts
          Can you show any of the Wayfinder calls on your pages.
          With any of the chunks they use?
            • 31039
            • 49 Posts
            it works fine in any other browser ... just dosen’t work in IEv6!!!!
              • 4310
              • 2,310 Posts
              I use the same menu at http://www.crickweb.co.uk if you look at the source code you’ll see the conditional statements from the chunk I posted.
              Your source code shows no conditional statements so I don’t see how Wayfinder can be using the {{cssplay_revParentRow}} chunk
                • 31039
                • 49 Posts
                very confused now

                <div id="menucontainer">
                <div class="menu">
                [[Wayfinder? &startId=`0` &excludeDocs=`40,22` &parentRowTpl=`cssplay_revParentRow`   ]]
                </div> 
                </div>


                and if i look at the HTML it creates

                <div id="menucontainer">
                <div class="menu">
                <ul><li class="active"><a href="http://www.cayeaccommodations.com/" title="Welcome" >Home</a></li>
                <li><a  href="/index.php?id=30" title="About Caye Caulker">About Caye Caulker<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                
                <ul><li><a href="/index.php?id=38" title="Weather in Belize" >Weather in Belize</a></li>
                <li class="last"><a href="/index.php?id=37" title="Travel" >Travel</a></li>
                </ul>
                
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                
                </li>
                <li><a  href="/index.php?id=27" title="Accommodation">Accommodation<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                
                <ul><li><a href="/index.php?id=28" title="Seaside Villas Condos" >Seaside Villas Condos</a></li>
                <li><a href="/index.php?id=29" title="Sailwinds Beach Suites & Condos" >Sailwinds Beach Suites</a></li>
                <li><a href="/index.php?id=33" title="Gumbo Limbo Cabana" >Gumbo Limbo Cabana</a></li>
                <li><a href="/index.php?id=34" title="Picololo Apartments" >Picololo Apartments</a></li>
                <li><a href="/index.php?id=35" title="Casa Roja" >Casa Roja</a></li>
                <li><a href="/index.php?id=36" title="Sea Dreams Cabana" >Sea Dreams Cabana</a></li>
                <li><a href="/index.php?id=31" title="Chateau Giselle" >Chateau Giselle</a></li>
                <li class="last"><a href="/index.php?id=32" title="Angler's Reef" >Angler's Reef</a></li>
                </ul>
                
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                
                </li>
                <li><a href="/index.php?id=4" title="Other Services" >Other Services</a></li>
                <li class="last"><a href="/index.php?id=9" title="Contact Us" >Contact Us</a></li>
                </ul>
                </div> 
                </div>



                which looks correct? http://www.cayeaccommodations.com/ .... am i missing something?
                  • 4310
                  • 2,310 Posts
                  I can see the conditional statements now, but it still not working in IE6 (no menu at all) nor Opera (no second level on hover).
                  This was the same for me until I got the conditional statements in.
                  The only other thing id the CSS which I’m just looking at now.
                  Will post back shortly!
                    • 4310
                    • 2,310 Posts
                    Your skin2.css file is very different to the official css play one.
                    Here’s the one I’m using, obviously the sizing and colouring will be wrong but try it to check if it works.
                    /* ================================================================ 
                    This copyright notice must be untouched at all times.
                    
                    The original version of this stylesheet and the associated (x)html
                    is available at http://www.cssplay.co.uk/menus/final_drop.html
                    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
                    This stylesheet and the associated (x)html may be modified in any 
                    way to fit your requirements.
                    =================================================================== */
                    
                    .menu {width:775px; height:32px; font-size:0.9em; position:relative; z-index:100;border-right:1px solid #fff; padding-left:6px;font-family: "Trebuchet MS"; font-weight: bold;}
                    /* hack to correct IE5.5 faulty box model */
                    * html .menu {width:777px; w\idth:775px; padding-left:2px;}
                    /* remove all the bullets, borders and padding from the default list styling */
                    .menu ul {padding:0;margin:0;list-style-type:none;}
                    .menu ul ul {width:85px;}
                    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
                    .menu li {float:left;width:85px;position:relative;}
                    /* style the links for the top level */
                    .menu a, .menu a:visited {display:block;font-size:11px; text-decoration:none; color:#fff; width:85px; height:30px; border:1px solid #fff; border-width:1px 0 1px 1px; background:#000066; text-align:center; line-height:29px;}
                    /* a hack so that IE5.5 faulty box model is corrected */
                    * html .menu a, * html .menu a:visited {width:86px; w\idth:85px;}
                    
                    /* style the second level background */
                    .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                    /* style the second level hover */
                    .menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                    .menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                    /* style the third level background */
                    .menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
                    /* style the third level hover */
                    .menu ul ul ul a:hover {background:#b2ab9b;}
                    
                    
                    /* hide the sub levels and give them a positon absolute so that they take up no room */
                    .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:85px;border-top:1px solid #000;}
                    /* another hack for IE5.5 */
                    * html .menu ul ul {top:30px;t\op:31px;}
                    
                    /* position the third level flyout menu */
                    .menu ul ul ul{left:85px; top:-1px; width:85px;}
                    
                    /* position the third level flyout menu for a left flyout */
                    .menu ul ul ul.left {left:-85px;}
                    
                    /* style the table so that it takes no ppart in the layout - required for IE to work */
                    .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
                    
                    /* style the second level links */
                    .menu ul ul a, .menu ul ul a:visited {background:#607799; color:#fff; height:auto; line-height:1.5em; padding:5px 10px; width:65px;border-width:0 1px 1px 1px;}
                    /* yet another hack for IE5.5 */
                    * html .menu ul ul a, * html .menu ul ul a:visited {width:87px;w\idth:65px;}
                    
                    /* style the top level hover */
                    .menu a:hover, .menu ul ul a:hover{color:#fff; background:#3333CC;}
                    .menu :hover > a, .menu ul ul :hover > a {color:#fff; background:#3333CC;}
                    
                    /* make the second level visible when hover on first level list OR link */
                    .menu ul li:hover ul,
                    .menu ul a:hover ul{visibility:visible; }
                    /* keep the third level hidden when you hover on first level list OR link */
                    .menu ul :hover ul ul{visibility:hidden;}
                    /* make the third level visible when you hover over second level list OR link */
                    .menu ul :hover ul :hover ul{ visibility:visible;}