IE6 horizontal menu level 1

I have a horizontal menu that seems to be working great except in IE6. In IE6 the level 1 drop down menu is displayed with approximately 4px gaps between the vertical menu elements. The menu opens over a SWF and when the cursor hits a gap, the menu closes. It's almost impossible to mouse down through the menu items without it closing. I tried adjusting some of the CSS in "menu_ie.css" but I can't seem to find a way to remove the gap.

Any ideas?

The menu item is "galleries" at www.kathleensmithphoto.com

Paul

Have you tried changing the top and bottom padding on the level 1 menu?
ul#cssmw ul.level-1 li span a {
background-color: #f4efdb;
background-image: none;
color: #87838a;
display: block;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
margin: -1px 0 0 0;
padding: 6px 6px 6px 12px;
text-align: left;
text-decoration: none;
text-transform: lowercase;
width: 130px;
}

to:
padding: 0 6px 0 12px;

Make any adjustment to the CSSMenuWriter/cssmw/menu_ie.css, as your <!--[if lte IE 6]> conditional will call on that one for IE6. The other stylesheets are working fine for the newer browsers, so best leave them alone.

Perhaps you can (in the menu_ie.css) ul#cssmw li span a { rule, use a minus top or bottom margin (one or the other, not split) value as you did in your regular stylesheet.

Maybe:

margin: 0 4px -4px 4px; // might be a starting point

Thanks guys... Although the exact locations you suggested did not work, I kept working with it and found a solution by adding the margin line to this style:

ul#cssmw ul.level-1 li {
background-image: none;
margin: 0 0 -4px 0;
}


I think I'm good now, thanks again!

Great to hear it. If you run into any additional issues, feel free to open a new thread.