CSS Menu Writer 2 IE 6 woes

Hi all,

silverartsjewelry.com is the website talked about.

First time post so I'll be available for further explanations of whatever I forget to include...

So, I uploaded a website I created for a client using Dreamweaver CS4. Naturally, I built my horizontal navigation menu with Menu Writer 2. It seems to work on all browsers just fine, but I am getting a horrendous eye sour of a menu in Internet Explorer 6. On the homepage, it goes completely awry... You have to see it to believe it: silverartsjewelry.com. Also, there's a more minor but still intolerable looking effect on the other pages.

Please, help. I have spent too much time making this website great to be sunk by IE 6!

Thanks in advance for any contributions. I appreciate it and look forward to helping the community where I can.

-matt

When I visit your page, the main issue I see is that the banned image is doubled up.



In the head of the document I see:

<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw/menu_ie.css");
</style>
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='_images/banner.png')"  src="_images/banner.png" alt="Silver Arts Jewelry Co." />
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='_images/announcements.png')"  src="_images/announcements.png" alt="Silver Arts Jewelry Co." />
<![endif]-->

the two image tags are the cause of the head being doubled up in IE6.

Thanks for the tip... I picked up that code somewhere as a workaround for IE6 transparency issues. Obviously, it's not working. Instead, I've changed my graphics from a .png with transparent background to .gif with matching color background.

Beyond that, I'm recreating my menu through the wizard as I discovered a separate menu_ie.css file for IE6 that I haven't modified. So, after I rebuild, I'll update the thread again.

Question: I added some specific css rules for the "Services" tab specifying a wider width. How do I do the same in the menu_ie.css file after rebuilding? Here's the specific rules to translate... Any help or knowledge is much appreciated.

ul#cssmw li#services > a{
width: 120px;
}
ul#cssmw li#services > li > a{
width: 120px;
}
ul#cssmw li#services ul.level-1 > li > a{
width: 120px;
}

So, I went through the Menu Writer 2 set-up again and replicated my menu thus producing a pristine menu_ie.css file. This I imported and replaced my original menu_ie.css.

Now, two major problems remain.

1) When you hover over an item with children items, those drop-down items appear behind my JavaScript slideshow. Big problem when customers can't see menu items. Any solutions?

2) Despite commenting out every instance of a border in the menu_ie.css there still remain a black bottom border under the parent items. That's minor compared to the black border lines that decide to cross the screen when you hover over children items of "Services" when at /services.htm.

Please help me as IE6 is proving to be quite a beast needing slaying. Thanks! (I'll closely watch the thread so ask for more specifics if needed).

for IE6 those rules would be:
ul#cssmw li#services a{
width: 120px;
}
ul#cssmw li#services li a{
width: 120px;
}
ul#cssmw li#services ul.level-1 li a{
width: 120px;
}

Appreciate the minor help of translating the css rules, but really need some help troubleshooting two major problems...

1) When you hover over an item with children items, those drop-down items appear behind my JavaScript slideshow. Big problem when customers can't see menu items. Any solutions?

2) Despite commenting out every instance of a border in the menu_ie.css there still remain a black bottom border under the parent items. That's minor compared to the black border lines that decide to cross the screen when you hover over children items of "Services" when at /services.htm.

1) in the screen.css, add a z-index to the header:
#outerWrapper #header {
font-size: 18px;
font-weight: bold;
line-height: 15px;
left-margin: auto;
position: relative;
z-index:9999;
}



2) I do not see any borders when I preview your page in IE6. I cannot see the problem.