Skip to main content
F
Fish Barrel
Known Participant
July 22, 2009
Question

what is wrong with my loop????

  • July 22, 2009
  • 2 replies
  • 1219 views

I have this loop that works fine in firefox, of course, but not so well in ie.

Here is the css for it:

.menu {margin:9px 0px 0px 0px; z-index:999999;}


/* 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;
    border:1px #CCCCCC solid;
    width:112px; height:112px;
    padding:0px 5px 0px 5px;
    margin:0px 7px 15px 0px;
    display:block;
       
}
.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.drop2 {
    visibility:hidden;
    position:absolute;
    width:300px;
    top:40px;left:-70px; 
    z-index:99999;
}
/* another hack for IE5.5 */
* html .menu ul ul.drop {top:30px;t\op:31px;}
/* another hack for IE5.5 */
* html .menu ul ul.drop2 {top:30px;t\op:31px;}

/* 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 top level hover */
.menu a:hover, .menu ul ul a:hover{}
.menu :hover > a, .menu ul ul :hover > a {}

/* 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; }

Here is the markup:

<div class="menu">
<ul>

<cfloop query="searchNarrow_prods" StartRow="#URL.StartRow#" EndRow="#EndRow#">
<cfoutput>


<cfset style="drop2">


<li class="drops" style=""><a href="productdisplay.cfm?category_id=#searchNarrow_prods.cat_id#&subcat_id=#searchNarrow_prods.subcat_id#&sku=#searchNarrow_prods.sku#&mw=#searchNarrow_prods.mw#" title="#searchNarrow_prods.product_name#" style="background: url(#thumbsfolder##sku#.jpg) center no-repeat;"></a>

   
<!--[if !IE]>-->

    <ul class="#style#">
        <li>
            <p>
            <b>Product:</b> #product_name#<br />
            <b>Price:</b> #LSCurrencyFormat(price)#<br />
            <b>Item Number:</b> #sku#
            </p>


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


    </ul>

<!--<![endif]-->


</li>

       
              
<cfset counter = counter + 1>


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


</div>

Everytime you rollover the first link a box pops up presenting the information in the second ul tags. In ie it makes it where the box appears behind all the first links. Why is this? Can anyone help???

Here is a link to see it in action.

http://www.karavelshoes.com/loopproducts.cfm?category_id=1&mw=1

    This topic has been closed for replies.

    2 replies

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    July 25, 2009

    When Internet Explorer goes to the page

    http://www.karavelshoes.com/loopproducts.cfm?category_id=1&mw=1

    it complains about your Javascript. It tells me, "'document.Ad_Image' is null or not an object". On second thought, did you include a third-party marketing script, from Google perhaps?

    A
    Anonymous
    July 24, 2009

    I realize this is not very helpful....Still.

    I just tried it in Chrome, FireFox and Opera and it works fine in all of them as far as I can see.  However when I tried it in IE 8 I did not even get the popups to open at all and there was a script error listed on the page which was:

    Line: 44

    Char: 1

    Error: Object required

    Code: 0

    URL: http://www.karavelshoes.com/loopproducts.cfm?category_id=1&mw=1

    And another stating

    Line: 28

    Char: 1

    Error: 'document.Ad_Image' is null or not an object

    Code: 0

    URL: http://www.karavelshoes.com/loopproducts.cfm?category_id=1&mw=1

    I took a quick look at the javascript, your posted source, the generated css and HTML.  I could not see the problem.  However I tend to use Flex and gave up on XHTML log ago.  So I am likely just not seeing it.  Anyway I hope this may help find the answer and if it does not at least I can say that your page looks nice.  Very Clean!  And hey, 3 our of 4 major browsers is not that bad right? 

    -Joe

    P.S.  Looks like an ideal site for Flex to me....Grins!

    F
    Fish BarrelAuthor
    Known Participant
    July 25, 2009

    Thanks Joe, your post was very helpful. Still have not found the solution, but still working on it. I will repost when I find the answer :]

    A
    Anonymous
    July 25, 2009

    Hi bradleybebad;

    first off you are not having coldfusion issues - though I think you know that. However you are having some basic issues that should be fixed

    1. your html does not validate, looking at the source, I see mismatched ul & li tags ...  if I go to validate it - 154 errors.

    2. shoeStyles.css & karavel_styles_ex.css also do not validate.

    3. your page has a HUGE amount of whitespace in it, saving just the source to disk is near 100k [source!] - not causing your problem, but will make page load faster.

    4. I'm not sure about this:

    <li class="drops">
        <a href="...url..." style="background: url(...img...) center no-repeat;">
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if !IE]>-->
            <ul class="drop2">
                <li>
                    <p>some-markup</p> 
                    <img src="...src..."  width="220px" style="position:relative; left:23px; top:30px;" />
                </li>
            </ul>
        <!--<![endif]-->
    </li>

    - I have never seen anyone use conditional if statements to control html presentation, in fact I am going to go out on a limb, not check with google and say "it's wrong - and won't work as expected or reliably" [<!--[if IE 7]><!--></a><!--<![endif]-->]

    - you are trying to remove a closing A tag for IE7 only? - why?

    - you have inline styles, not an error, but you should be using them wherever possible.

    So, I think if you clean up your basic markup errors and definately check to see if the conditional IF IE processing is supposed to work as you have it implemented, your problems will likely just "go away".

    - good luck!

    -sean

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices