Weird drop-down behaviour in explorer

I have been going crazy trying to solve a bug involving my Wayfinder implementation that occurs with explorer browsers.

The drop down works fine with safari and firefox. With explorer the drop-downs don’t stay dropped down! Move the mouse beyond the first drop-down button and the drop-down disappears - the mouse won’t hold it in place.

In the process of trying to solve this, I’ve found that this behaviour is triggered by the cursor moving outside the header area. On this site I’ve moved the navigation bar half way up the header area and the cursor will hold the drop-down menu (see under the ’breastfeeding’ button) until it moves outside the header. See:
http://www.breastfeedingnetwork.org.uk/explorer-fix.html

This is what is in my style sheet:

#header {
background: #7E1F97 url(images/bfn09pagetitle6.jpg) no-repeat top left;
height: 219px; /* set this to the height of the background image + 10px space + 30px for the navigation buttons */
}

#headernavigation {
position: relative;
top: 100px; /* Was 189px This spaces the nav buttons away from the banner */
height: 30px;
width: 900px; /* This is the width allowed for the buttons and stops them dropping onto the next line if the window shrinks */
}

This is in the template:

<div id="header">
<!-- This holds the navigation bar, based on the wayfinder -->

<div id="headernavigation">
[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &outerTpl=`cssplay_outer` &rowTpl=`cssplay_row` &parentRowTpl=`cssplay_parentRow` &innerTpl=`cssplay_inner` &cssTpl=`cssplay_dropdown` &outerClass=`menu` &excludeDocs=`{{navigation_exclude}}`]]
</div>
</div>

The chunks are as at :
http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html

(As an aside, I thought at one stage it was due to the drop-down buttons having gaps between them, unlike on the muddydogpaws example and found the problem to be as described above when trying to locate where the coding is that introduces the gaps with my site).

Any ideas and solutions explained in easy terms for someone new to Wayfinder much appreciated.

I’ve had this (or a similar) problem involving IE adding an extra pixel in its box model somewhere. I finally gave it up and added a conditional style tag in my template head with the CSS needed to make IE happy.

Quote from: sottwell at May 08, 2009, 02:04 AM

I’ve had this (or a similar) problem involving IE adding an extra pixel in its box model somewhere. I finally gave it up and added a conditional style tag in my template head with the CSS needed to make IE happy.

Thanks sottwell. I already have a conditional style tag in the Wayfinder chunk for the drop-down css - but what I don’t have is css that works. What did you use?

I have no idea; that was a couple of years ago

You may well be right about the header area.
However, the only sub menu that drops out of the header is breastfeeding which falls over the leftcontent div.
Perhaps the absolute positioning of #leftconent is causing the problems with IE7 and below (it’s fine in IE8)?

Quote from: bunk58 at May 08, 2009, 08:46 AM

You may well be right about the header area.
However, the only sub menu that drops out of the header is breastfeeding which falls over the leftcontent div.
Perhaps the absolute positioning of #leftconent is causing the problems with IE7 and below (it’s fine in IE8)?

Thanks bunk58. However, there is also the problem with this template, which doesn’t use the #leftcontent code:
http://www.breastfeedingnetwork.org.uk/wide-template.html

Again, it works with other browsers.

I tried removing the borders and gaps between the buttons, but the problem remains: move outside the header area and the menu won’t hold up. Infuriating!!

It appears to be working for me in IE7 Vista.

BTW, I did read of a case where the IE pop-up blocker was interpreting the drop-down list as a pop-up.

It seems to be a combination of gaps between the drop-down buttons (which I’ve now removed) and the position:absolute; used for the left column. I think I’ll just do a work round so the buttons above that column don’t drop down!