what is wrong with my loop????

Report · Jul 21, 2009

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:

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

</ul>

</li>

</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

Report · Jul 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!

Report · Jul 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 :]

Report · Jul 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" [</a>]

- 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

Report · Jul 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?