7 Replies Latest reply on Dec 18, 2008 7:22 PM by Newsgroup_User

    CF loop drop down menu

    bradleybebad
      I have a loop that displays products from a database. It works fine but I have a pop-up box that is displayed when rollover. This pop-up box works great except for the fact, in IE it is displayed behind everything. I tried messing with z-index and just lost myself.

      goto http://karavelshoes.com/karavelNew


      CFM code:

      <div class="menu">
      <ul>
      <cfset layerDrop = 0>
      <cfloop query="getproducts" StartRow="#URL.StartRow#" EndRow="#EndRow#">
      <cfoutput>

      <cfif counter IS 4 OR counter IS 5 OR counter IS 10 OR counter IS 11 OR counter IS 16 OR counter IS 17>
      <cfset style="drop2">
      <cfelse>
      <cfset style="drop">
      </cfif>

      <li><a href="interiorW.cfm?category_id=#URL.category_id#&subcat_id=#URL.subcat_id#&sk u=#sku#" style="background: url(#thumbsfolder##sku#.jpg) center no-repeat;"><!--[if IE 7]><!--></a><!--<![endif]-->


      <ul class="#style#">
      <li>
      <p>
      <b>Product/b> #product_name#<br />
      <b>Price/b> #LSCurrencyFormat(price)#<br />
      <b>Item Number/b> #sku#
      </p>
      <cfif counter IS 4 OR counter IS 5 OR counter IS 10 OR counter IS 11 OR counter IS 16 OR counter IS 17>

      <img src="#prodpicsfolder##sku#.jpg" width="220px" style=" position:relative; left:25px; top:30px;">
      <cfelse>
      <img src="#prodpicsfolder##sku#.jpg" width="220px" style="position:relative; left:23px; top:30px;" />
      </cfif>

      </li>


      </ul>

      </li>


      <cfset counter = counter + 1>

      </cfoutput>
      </cfloop>
      </ul>
      </div>




      as you can see, I tried to mess with z-index, but had no luck!
      Here is my css:


      .menu {margin:45px 0px 0px 0px;}


      /* remove all the bullets, borders and padding from the default list styling */
      .menu ul {padding:0;margin:0;list-style-type:none;}

      /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
      .menu li {
      position:relative;
      display:inline;

      }

      /* style the links for the top level */
      .menu a, .menu a:visited
      {
      text-decoration:none;
      display:block;
      border-width:1px;
      border-color:#CCCCCC;
      border-style:solid;
      width:100px; height:100px;
      padding:0px 5px 0px 5px;
      margin:0px 3px 15px 0px;

      }
      .menu a:hover
      {
      text-decoration:none;
      border-width:1px;
      border-color:#666666;
      border-style:solid;

      }

      /* a hack so that IE5.5 faulty box model is corrected */
      * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}


      .menu li li {
      position:relative;
      background:#FFFFFF;
      border:1px #666666 solid;
      width:269px;
      padding:0px 0px 45px 0px;
      }
      .menu p {
      position:relative; left:20px; top:10px;
      display:inline;

      }

      /* hide the sub levels and give them a positon absolute so that they take up no room */
      .menu ul ul.drop {
      visibility:hidden;
      position:absolute;
      width:277px;
      top:40px;left:70px;
      padding:0px 0px 0px 23px;

      }
      .menu ul ul.drop2 {
      visibility:hidden;
      position:absolute;
      width:300px;
      top:40px;left:-240px;

      }

      /* 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; }
        • 1. Re: CF loop drop down menu
          Level 7
          you need to add appropriate z-index (something large usually works fine
          - no need to be precise in this) to the style definitions for ul.drop
          and ul.drop2, not to the link:

          .menu ul ul.drop {
          visibility:hidden;
          position:absolute;
          width:277px;
          top:40px;left:70px;
          padding:0px 0px 0px 23px;
          *z-index:999;*
          }
          .menu ul ul.drop2 {
          visibility:hidden;
          position:absolute;
          width:300px;
          top:40px;left:-240px;
          *z-index:999;*
          }

          see if that works.

          Azadi Saryev
          Sabai-dee.com
          http://www.sabai-dee.com/
          • 2. Re: CF loop drop down menu
            bradleybebad Level 1
            Tried that and had no such luck. it still displays under all the lists that come later in the loop. All the lists current and before in the loop, it displays over.

            check it out in IE:

            http://karavelshoes.com/karavelNew/interiorW.cfm?category_id=1&SubCat_ID=1

            • 3. Re: CF loop drop down menu
              Level 7
              bradleybebad wrote:
              > I have a loop that displays products from a database. It works fine but I have
              > a pop-up box that is displayed when rollover. This pop-up box works great
              > except for the fact, in IE it is displayed behind everything. I tried messing
              > with z-index and just lost myself.
              >
              > goto http://karavelshoes.com/karavelNew

              #products_all also have z-index:2. Try removing the z-index here or
              increasing/decreasing it's value.

              --
              Mack
              • 4. Re: CF loop drop down menu
                bradleybebad Level 1
                Took out all the stupid z-indexs and tried placing a high z-index on the ul.drop and still did not work. I really hate IE sometimes.
                • 5. Re: CF loop drop down menu
                  bradleybebad Level 1
                  I have tried through and through to fix this. Never found a solution.
                  • 6. Re: CF loop drop down menu
                    Level 7
                    do not despair!
                    is that url still valid to check the problem?


                    Azadi Saryev
                    Sabai-dee.com
                    http://www.sabai-dee.com/
                    • 7. Re: CF loop drop down menu
                      Level 7
                      hmm... some serious problems you have there...

                      the site works and looks fine in FF/Win

                      in IE8/Win it is VERY broken: the sub-menus pop-up fine, but do not show
                      any text; the product display is totally broken (shows one column of
                      duplicate product photos) and no mouseover product close-ups display.

                      in IE8/Win in Compatibility View it looks a bit better... at least the
                      menus work fine. but no mouseover product close-ups still...

                      in IE7/Win* the menus work just fine, fly-outs and all, but no mouseover
                      product close-ups display. (same as IE8 in Compatibility View, of
                      course, as that's what CV does - makes IE8 use IE7 rendering engine)

                      in IE6/Win*... oh well, don't we all hate IE6?... but the site is
                      TOTALLY broken... no menus, no any product display to talk about...

                      i think you need to thoroughly research the CSS issues, especially the
                      CSS bugs in IE6 - there are literally thousands of websites devoted to
                      this. you may want to experiment with different DOCTYPE declarations,
                      too. all-in-all, this is such a vast area that it is impossible to tell
                      you exactly hat you need fixing.

                      the way i usually approach this is
                      - start simple - basic layout, no fancy js stuff - to make sure the
                      foundation is right and is displayed correctly in all browsers
                      - start adding fancy stuff, one thing at a time, testing in all browsers
                      after each change
                      - add more features, constantly testing in all browsers
                      - a lot of times using 3rd party js scripts you will find out that they
                      do not actually work well with all browsers. look for compatible scripts
                      that work in all browsers. i may even suggest you use one js library,
                      like jquery, and use plug-ins available for it - at least that will sort
                      of guarantee the foundation...

                      in one of my sites with a very tricky layout and even trickier ui, which
                      gave me huge headaches to make it work in IE6, i reverted to
                      conditionally putting the site in quirks mode if the use agent is
                      IE6/Win by adding
                      <cfif findnocase("Mozilla/4.0 (compatible; MSIE 6.0; Windows NT",
                      cgi.http_user_agent)><!--turn quirks mode on--></cfif>
                      line before the DOCTYPE line - any whitespace before the DOCTYPE line
                      puts iE6 in quirks mode, changing its box model and can fix some display
                      issues.

                      good luck. that's gonna be a lot of work, a lot of research and a lot of
                      testing... but that's what we have to do as web developers...

                      * - these were tested from within IETester suite - i do not have
                      stand-alone versions of those browsers

                      Azadi Saryev
                      Sabai-dee.com
                      http://www.sabai-dee.com/