CF loop drop down menu

[Fish Barrel]

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

[Newsgroup_User]

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/

[Fish Barrel]

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

[Newsgroup_User]

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

[Fish Barrel]

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.

[Fish Barrel]

I have tried through and through to fix this. Never found a solution.

[Newsgroup_User]

do not despair!
is that url still valid to check the problem?


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

[Newsgroup_User]

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/