[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need help with custom css-based dropdown menus

Posted on 2007-08-10
13
Medium Priority
?
504 Views
Last Modified: 2013-11-19
I've been trying to implement custom dropdown menus for my "Shop" and "Brands" button on the new shopping cart I'm developing:

http://www.isadorapopper.com/index.cfm

I'm doing this using CSS, and feel that I'm about 75% there.  But if possible, I'd be grateful for some assistance with the following:

1) I can't seem to reliably control when my menus should disappear.  Since each of the 2 menus is being displayed in it's own div, .. I assumed that having something like the following would do the trick:

<div id="sec1" style="position:absolute;width:125px;background-color:#89BE3A;text-align:left;visibility:hidden;z-index:5;padding:10px;border:1px solid #285C12;" onMouseout="hideSec(1);"><cfinclude template="put_shopmenus.cfm"></div>

But this isn't working very well at all.  In fact, it seems that the hideSec() function is also being triggered onMouseover. So basically, whenever you move the mouse pointer over the div, .. the menu disappears after a few seconds (I currently have a setTimeout function in the hideSec() function).  I've tried adding the showSec() and hideSec() functions to the links in the dropdown menus, but that seems to be problematic as well.  How can I accomplish the desired effect?  (menus stay visible when the mousepointer is over them, and then disappear when the mouse pointer is moved away from it).

Thanks!
- Yvan

 


0
Comment
Question by:IDEASDesign
  • 8
  • 5
13 Comments
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19671646
This is the simplest form of a drop down menu, does this do anything for you?

<div style="position:relative;
            width:auto; <!-- change to change the area that triggers the mouse in/out -->
            height:auto;
            background-color:#89BE3A;"

            onmouseover="document.getElementById('menu').style.visibility = 'visible'"
            onmouseout="document.getElementById('menu').style.visibility = 'hidden'"
>MENU</div>

<div id="menu"
     style="position:relative;
            width:200px;
            padding:10px;
            height:auto;
            background-color:#89BE3A;
            visibility:hidden;"

            onmouseover="document.getElementById('menu').style.visibility = 'visible'"
            onmouseout="document.getElementById('menu').style.visibility = 'hidden'"
>

  <ol>
   <li>option</li>
   <li>option</li>
   <li>option</li>
  </ol>

</div>
0
 

Author Comment

by:IDEASDesign
ID: 19672017
Your solution works great - thank you!  

There's just one small problem  -- I can't seem to be able to attach an onMouseout event to the Shop or Brands links/buttons (to trigger the hiding the layer).

In other words, .. there will be situations where users move their mouse pointer over the Shop or Brands buttons -- but NOT move their mouse pointer over any of the links in the popup menu (they might just want to look at the pretty menu). What then happens is that the popup menu never disappears -- it remains frozen on the screen until the user interacts with it)   I've found that if I attach my hideSec() function to the Shop and Brands buttons using onMouseout, .. that I'm right back where I started, .. where my layer hides itself after a few seconds.  

How can I code around this?

- Yvan
0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19672521
>I can't seem to be able to attach an onMouseout event to the Shop or Brands links/buttons

Why not?

<a href="javascript:void(0);" class="topnavlinks" onmouseover="showSec(1);hideSecNow(2);document.getElementById('menu').style.visibility = 'hidden'">Shop</a>       

Should suffice, no?

I'm not quite fallowing you on what you're saying.

Given that I can't see your JavaScript code it's hard for me to say something else. You need to define the mouseout=hide with the menu-button.

The other way of doing this is creating a mouse over for every other object on the page and hide the menu when the mouse moves over any other object than the menu -- this is of course not a good way to do this; probably the worst.

Check to see that all names are in order, e.g. I noticed that you have no "id" for the dropdown menu, i.e. <div class="shoplinks"> should be <div id="menu" class="shoplinks"> if the document.getElementById('menu') is going to find the div.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:IDEASDesign
ID: 19673531
Why not, ... you ask?

Because as soon as I mouse my move pointer off of the Shop / Brand button -- the menu disappears before I have a chance to move my mouse pointer over it.  

The javascript for my showSec/HideSec functions is as follows:

ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

//function hideSec() {
//if (ng5) document.getElementById('sec1').style.visibility = "hidden"
//else if (ns4) document.sec1.visibility = "hide"
//else if (ie4) sec1.style.visibility ="hidden"

//if (ng5) document.getElementById('sec2').style.visibility = "hidden"
//else if (ns4) document.sec2.visibility = "hide"
//else if (ie4) sec2.style.visibility ="hidden"
//}

function showSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function hideSec(n) {
if (ng5) setTimeout("document.getElementById(\'sec"+ n+"\').style.visibility = 'hidden'",2500);
else if (ns4) setTimeout("document.layers[\'sec" + n+"\'].visibility = 'hide'",2500);
else if (ie4) setTimeout("document.all[\'sec" + n+"\'].style.visibility = 'hidden'",2500);
}

function hideSecNow(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = 'hidden';
else if (ns4) document.layers["sec" + n].visibility = "hide";
else if (ie4) document.all["sec" + n].style.visibility = "hidden";
}

0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19673753
I'm sorry but your function doesn't make any sense.

I am going to do some serious surgery...

===========================

<html><head><script type="text/javascript">

ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function showSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function hideSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "hidden";
else if (ns4) document.layers["sec" + n].visibility = "hide";
else if (ie4) document.all["sec" + n].style.visibility = "hidden";
}

</script>

</head><body>

<a href="javascript:void(0);" onmouseover="showSec(1)" onmouseout="hideSec(1)">Shop</a>
<a href="javascript:void(0);" onmouseover="showSec(2)" onmouseout="hideSec(2)">Brands</a>


<div id="sec1" style="position:absolute;
                      width:125px;
                      background-color:#89BE3A;
                      text-align:left;
                      visibility:hidden;
                      z-index:5;
                      padding:10px;
                      border:1px solid #285C12;"
                      onmouseover="showSec(1)"
                      onmouseout="hideSec(1)">
<div class="shoplinks">
<a href="http://www.isadorapopper.com/index.cfm?category=4" class="shoplinks">Books</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=7" class="shoplinks">Coffee & Tea</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=5" class="shoplinks">Cookware</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=3" class="shoplinks">Furnishings</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=2" class="shoplinks">Kitchen Cleaning</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=1" class="shoplinks">Specialty Foods</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=6" class="shoplinks">Table Top</a><br/>
</div>
</div>

<div id="sec2" style="position:absolute;
                      width:125px;
                      background-color:#89BE3A;
                      text-align:left;
                      visibility:hidden;
                      z-index:10;
                      padding:10px;
                      margin-left:35px;
                      border:1px solid #285C12;"
                      onmouseover="showSec(2)"
                      onmouseout="hideSec(2)">
<div class="shoplinks">
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=5" class="shoplinks">Bodum</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=6" class="shoplinks">Caldrea</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=7" class="shoplinks">Chronicle Books</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=4" class="shoplinks">Emile Henry</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=3" class="shoplinks">Gel Mat</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=1" class="shoplinks">Lettuce Lizzie</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=8" class="shoplinks">Miscellaneous</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=2" class="shoplinks">Stonewall Kitchen</a><br/>
</div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>
</html>

===============================================

Try that one, it should do exactly what you want.
0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19673760
( I tried it in Fx, it should work in IE also, however when I tried it in IE 6 the CSS was kind of a little out of align, you may want to see to that).

0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19673779
One more thing:

between the word and the menu there is a little gap. If the user moves the mouse to slow or  else gets somehow into that gap the menu will shut down.

To fix this: either move the layer margin 1-2px up or use span for the button holders.
0
 

Author Comment

by:IDEASDesign
ID: 19684531
>> between the word and the menu there is a little gap. If the user moves the mouse to slow or  else gets somehow into that gap the menu will shut down.

Those aren't buttons.  Those are just plain hyperlinks inside a div that contains a tiling background image. That's whay I kept referring to those as "buttons/links" in my original post.

For that reason, ... what you're suggesting that I do won't work.  The mouse pointer will always need to move over the gap. Can you offer a solution for this?

Also, .. I already have this displaying correctly in IE6.  Do you have any way to correct the differences/problems that your code would introduce?  Because I've already invested a lot of time in ensuring that my code works consistently in all 3 browsers, and that the CSS positioning is correct in each.

- Yvan





0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19686245
>>For that reason, ... what you're suggesting that I do won't work.  The mouse pointer will always need to move over the gap. Can you offer a solution for this?

As you may have noticed: the onmouseover is set in the DIV (not a href). In other words, set the mouseover to the div/span that holds the text. Keep in mind then that it will be enough for the user to move the mouse over the container to activate the menu.

Regarding the "gap" (for the div-solution I gave) it is a CSS issue. In IE 6.0 and Opera 9.21 there is no "gap". To fix this I would, like previously stated, move the margin up 1 or 2 px (-2px), or as needed.

I do not think you can fix the "gap" that exist when you use plain text. What you can do however, if you really want to activate the menu only, and only, when the users hovers above the text (and not the entire div) is this:  

create a span to hold your href, make sure that the span either is set to "lock" to the bottom of the "button holder" or set its height to stretch all the way to the bottom. This will create a "box" around your href (and just your href), and when you set onmouse in/out on that span layer it will only activate itself when the user moves over the text and keep being activated when the mouse moves down and until it reaches the pop up menu.


>>Also, .. I already have this displaying correctly in IE6.  Do you have any way to correct the differences/problems that your code would introduce?  Because I've already invested a lot of time in ensuring that my code works consistently in all 3 browsers, and that the CSS positioning is correct in each.

My code shouldn't introduce any discrepancies; it is basically exactly the same code you gave, but slightly changed (compare them, notice the difference?; all I did was to remove all the time handlers). I tried it in Firefox 2.0, IE 6.0, and Opera 9.21, and it works like a charm.

And there shouldn't be any CSS issues, really.

Think about it, all the code does is set the layers visibility, nothing else. All you need to do is set the new function to be activated on the correct layer (see my recommendations above) and do the same for your pop up menus.




0
 

Author Comment

by:IDEASDesign
ID: 19686648
Sorry , .. but that's definitely not working for me.  

http://www.isadorapopper.com/index.cfm

This is a mess, actually, and works totally unlike the way you described.

I appreciate your efforts, but we're definitely going down the wrong path here.

- yg




0
 
LVL 3

Accepted Solution

by:
numbers1to9 earned 2000 total points
ID: 19687636
First, there are a lot of way to do a menu like this.

The method you have in front of you needs mainly a CSS solution, i.e. any solution to your problem is found on the CSS front. In respect to that, there is no more to do regarding JavaScript. (I would also like to add that you can do your menu entirely out CSS with the "behaviour" selectors (i.e. a:hover).

And the CSS solution for your problem is that you use a span as the area to activate your mouse events, (or a background image, but we'll stick to span).

Secondly, the reason that it not work as I suggested is that I didn't notice how you have created your menu (see further below for my example).


Now for your stuff.


I took a look at your format code, first: why:

<div id="sec1" style="position:absolute;
                      width:125px;
                      background-color:#89BE3A;
                      text-align:left;
                      visibility:hidden;
                      z-index:5;
                      padding:10px;
                      border:1px solid #285C12;"
                      onmouseover="showSec(1)">
<div class="shoplinks" onmouseout="hideSec(1)">

the mouse on/off should be on the same layer (the one layer with the id tag and style attributes). As it is now, the layer will not shut down when you move your mouse away from it. (I have taken your format code from the body tag, and changed it so that mouseout is on the id layer, and now the menu (after opening it and then leavning) works as it should.)


Regarding to the other problem, the "gap".

How should I put this. I took a look at  your format code, and the way you have created your layout makes it difficult to enable a CSS solution.

I have created an example of a CSS solution, using nested spans. While the example only works like it should in Firefox (and Opera, with a minor issue), it should give you an idea how to do this. (You need to work with your styles to make it work cross-browser)

Like I said this is an example, you could find different ways to implement this. Common to all these solutions (that I am thinking of) is that you need to solve it through CSS.

And as stated above, there are different ways of doing a drop down menu, but considering your JavaScript code, this is the best I could think of. Anyhow, your problem is related to the "gap", the only way to solve this is doing as making sure that there is an area that fills the "gap", and the only way to do that is by using a different object that activates the function on the mouse event (see my example).

Here follows my example (just copy and paste it in a empty html doc):

<html><head><script type="text/javascript">

ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function showSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function hideSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "hidden";
else if (ns4) document.layers["sec" + n].visibility = "hide";
else if (ie4) document.all["sec" + n].style.visibility = "hidden";
}

</script>
<link rel="stylesheet" href="http://www.isadorapopper.com/css/default.css" type="text/css" />
</head>

<body  text="#89BE3A" link="#89BE3A" vlink="#666699" alink="#666699" >

<div id="container">

<div id="top_left"><a href="index.cfm"><img src="http://www.isadorapopper.com/images/hp_header_logo.jpg" height="166" width="297" border="0" Alt="Isadora Popper - Purveyors"></a><br></div>

<div id="top_right"><form id="searchbox" name="searchbox" action="index.cfm?fuseaction=page.searchResults"method="post" class="nomargins" style="padding-top:138px;">Search &nbsp;<input name="string" value="" size="24" maxlength="30" class="formfield" /> &nbsp;
<a class="toggleopacity" href="javascript:void(0);">

<img src="http://www.isadorapopper.com/images/hp_header_btn_go_on.jpg" border="0" align="absmiddle" ALT="GO" onClick="document.searchbox.submit();"></a></form></div><div id="clear"></div><div id="topnav">

<!-- NO CHANAGES DONE ABOVE THIS LINE -->

<!-- AN EXAMPLE HOW A SOLUTION COULD BE -->

<!-- YOUR OLD MENU BACKGROUND
<img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle" ALT="Isadora Popper">
-->

<span id="menu_container" style="display:block;
             position:relative;
             width:792px;
             height:33px;
             background-image: url(http://www.isadorapopper.com/images/topnav_divider.jpg);">

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;" onmouseover="showSec(1)" onmouseout="hideSec(1)">

      <a href="javascript:void(0);" class="topnavlinks" >Shop</a>
  <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">

</span>

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;" onmouseover="showSec(2)" onmouseout="hideSec(2)">
  <a href="javascript:void(0);" class="topnavlinks" >Brands</a>
  <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">

</span>

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;">
      <a href="index.cfm?fuseaction=page.new" class="topnavlinks">What's New</a>
      <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">
</span>

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;">
      <a href="index.cfm??fuseaction=page.display&page_id=23" class="topnavlinks">Gifts</a>
      <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">
</span>

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;">
      <a href="index.cfm?fuseaction=shopping.giftregistry" class="topnavlinks">Registry</a>
      <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">
</span>

<span style="display:block;position:relative;
             width:auto;height:auto;background-color:transparent;
             float:left;">
      <a href="index.cfm?fuseaction=shopping.basket" class="topnavlinks">View Cart</a>
      <img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle">
</span>
<a class="menu_footer" href="http://www.isadorapopper.com/index.cfm?fuseaction=shopping.basket">Cart items: 0 &nbsp;Total: $0.00</a><img src="http://www.isadorapopper.com/images/topnav_divider.jpg" height="33" width="1" border="0" Alt="Isadora Popper" align="absmiddle"><a href="index.cfm?fuseaction=shopping.checkout" class="topnavlinks">Checkout</a><br>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!-- TOP MARGIN CHANGED -->
<div id="sec1" style="position:absolute;
                      margin-top:-15px;
                      width:125px;
                      background-color:#89BE3A;
                      text-align:left;
                      visibility:hidden;
                      z-index:5;
                      padding:10px;
                      padding-top:0px;
                      border:1px solid #285C12;"
                      onmouseover="showSec(1)" onmouseout="hideSec(1)"> <!-- ON THE SAME LAYER -->
<div class="shoplinks">

<div class="shoplinks">
<a href="http://www.isadorapopper.com/index.cfm?category=4" class="shoplinks">Books</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=7" class="shoplinks">Coffee & Tea</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=5" class="shoplinks">Cookware</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=3" class="shoplinks">Furnishings</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=2" class="shoplinks">Kitchen Cleaning</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=1" class="shoplinks">Specialty Foods</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?category=6" class="shoplinks">Table Top</a><br/>
</div></div></div>

<div id="sec2" style="position:absolute;
                      margin-top:-15px;
                      width:125px;
                      background-color:#89BE3A;
                      text-align:left;
                      visibility:hidden;
                      z-index:10;
                      padding:10px;
                      padding-top:0px;
                      margin-left:60px;
                      border:1px solid #285C12;"
                      onmouseover="showSec(2)" onmouseout="hideSec(2)"> <!-- ON THE SAME LAYER -->
<div class="shoplinks">


<div class="shoplinks">
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=5" class="shoplinks">Bodum</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=6" class="shoplinks">Caldrea</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=7" class="shoplinks">Chronicle Books</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=4" class="shoplinks">Emile Henry</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=3" class="shoplinks">Gel Mat</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=1" class="shoplinks">Lettuce Lizzie</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=8" class="shoplinks">Miscellaneous</a><br/>
<a href="http://www.isadorapopper.com/index.cfm?fuseaction=product.list&&mfg_account_id=2" class="shoplinks">Stonewall Kitchen</a><br/>
</div>

</span> <!-- MENU CONTAINER ENDS HERE-->

<!-- HAVN'T CHANGED ANYTHING BELOW THIS LINE -->
</div></div></div><div id="clear"></div><div id="content_wrapper"><br><img src="http://www.isadorapopper.com/images/hp_photos_left.jpg" height="495" width="387" align="left" ALT="Isadora Popper"><img src="http://www.isadorapopper.com/images/hp_welcome.jpg" height="91" width="397" ALT="Welcome"><br><div id="hptext"><div style="padding-left:20px;padding-right:20px;height:72px;">Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here. Text will go here.</div></div><div style="float:left"><img src="http://www.isadorapopper.com/images/hp_photos_middletop.jpg" height="162" width="195" style="padding:6px;padding-bottom:10px;" ALT="Isadora Popper"><br><img src="http://www.isadorapopper.com/images/hp_photos_middlebottom.jpg" height="151" width="195" ALT="Isadora Popper"></div><img src="http://www.isadorapopper.com/images/hp_photos_right.jpg" height="323" width="194" style="padding-top:6px;" ALT="Isadora Popper"><br clear="all"><div id="clear"></div><br><div id="footer_wrapper"><div id="footer"><div class="footer_links"><a href="http://www.isadorapopper.com/index.cfm" class="footer_links" onmouseover="dmim('Home'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Home</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=21" class="footer_links" onmouseover="dmim('Shop'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Shop</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=22" class="footer_links" onmouseover="dmim('Brands'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Brands</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.new" class="footer_links" onmouseover="dmim('What\'s New'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">What's New</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=23" class="footer_links" onmouseover="dmim('Gifts'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Gifts</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=shopping.giftregistry" class="footer_links" onmouseover="dmim('Registry'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Registry</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=shopping.basket" class="footer_links" onmouseover="dmim('View Cart'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">View Cart</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=24" class="footer_links" onmouseover="dmim('About Us'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">About Us</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.contactUs" class="footer_links" onmouseover="dmim('Contact Us'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Contact Us</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=25" class="footer_links" onmouseover="dmim('Terms & Conditions'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Terms & Conditions</span></a>&nbsp;|&nbsp;<a href="http://www.isadorapopper.com/index.cfm?fuseaction=page.display&page_id=26" class="footer_links" onmouseover="dmim('Privacy Policy'); return document.returnValue;" onmouseout="dmim(''); return document.returnValue;" ><span class="footer_links">Privacy Policy</span></a><br/></div><br/><div id="copyright">© 2007 <a href="mailto&#58;yvan&#64;ideasdesigninc&#46;com">Isadora Popper</a>.&nbsp;All Rights Reserved.</div><br></div></div></div></body></html>







0
 

Author Comment

by:IDEASDesign
ID: 19692068
Thanks so much for all your help with this.  As it turns out, there were lots of things interfering with your ability to view and interpret my source code consistently (cached CFCs and session variables - unintentional nested divs - my tinkering with it in between experts exchange viewings, etc).  I finally got it working correctly after recognizing and correcting these things:

http://www.isadorapopper.com/index.cfm

I had stubbornly assumed all along that the hiding of the layer couldn't be prevented onMouseout if the gap was eliminated.  I tried using SPANs like you suggested, but found that I couldn't control the height of those.  So I instead ended up using a table (You can view my source code to see what I mean).

The solution works identically in Firefox, UE6, IE7, .. and even Safari for Windows :)

Thanks for your help!  I've awarded you the 500 points.
- Yvan
0
 
LVL 3

Expert Comment

by:numbers1to9
ID: 19692723
You're welcome.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question