Problems w/ IE 6

Hello All,
I recently created a vertical menu with CSS Menu Writer that presents problems in - you guessed it - IE 6 (the bane of my existence apart from my mother-in-law).

There are two main problems:
1. In IE 6, the menu has this white background that I've tried to rid myself of but to no avail. (Yes, I've tried "background-color: none;")

2. The top button on the menu has a fly-out/drop down that works quite well in IE 8 but creates scroll bars in IE 6 & you never see the sub-menu at all.

This lamentable state of affairs may be found at test.jpblack.com

I have probably done something wrong somewhere along the line and am willing to accept a sharp rap across the knuckles if only someone would show me the error of my ways.

For your convenience/amusement, I have included a zip file which contains:
1. The IE 6 Menu CSS,
2. The menu.php file
3. The home page for test.jpblack.com
4. The CSS for the site.

I eagerly await your response.

Howard Parsons

I have been examining your page and it seems that there may be an issue with the background for the area with the menu in it. Looking at the css it seems that you have this set to be white:

jpblack.css (line 261)
#outerWrapper #contentWrapper #nav {
background-color:#FFFFFF;

As for the scroll bars appearing this is due to the fixed positioning you are using on the div that the navigation is contained in. It looks like you may need to adjust this or remove it entirely.

Eric,
I will take this under advisement and see what I can fix. I'll report back when I'm done.

Howard Parsons

Eric,
I got rid of the "fixed" positioning and tried 1st "float:right;" and then no positioning/alignment of any kind.

On the 1st attempt, I got scroll bars in most browsers & the fly-out seemed to appear behind the #content division.

On the second attempt, I lost the scroll bars but nothing flies out at all.

I removed the now superfluous <div></div> surrounding the menu but still no joy ( or fly-out).

I'm scared to see how this looks in IE 6.

Howard Parsons

You are definitely making progress. It seems that the scroll bars are occurring because of the overflow: auto that you have applied to the body, outerwrapper, contentwrapper, and nav div. When I remove this overflow setting on these I'm able to see the menu appear on the left side when you hover over them. This seems to affect the content in the center of the page though. You may need to add another div around this area and specify the overflow for that div. The menu should work ok though if you get rid of the overflow. Let me know when you get it updated and I can check in IE for you as well.

Eric,
I decided to work outward & changed the "overflow: auto" to "overflow: visible;" in the "nav" portion of the CSS. That did the trick. I had the chance to check things on IE 6 & everything looks much better now.

One final question. In IE 6, I notice that there is a thin white line appearing beneath each button of the menu & a thin black line appearing beneath each button on the fly-out menu. Do you have any suggestions as to which bits I need to tweak in the menu CSS for IE 6? (I tried fixing these when I first started trying to correct the IE 6 problem & wound up with a right mess on my hands.)

Thank You
Howard Parsons

This looks to be another CSS bug for IE6. I have done some reading and researching this at it looks like this issue may be related to the mysterious hasLayout property. I was not able to locate an exact example of the problem you are experiencing nor was I able to find a solution to this particular display issue.

Has anyone else out in our forum seen this type of thing and know how to resolve it?

I will look for any response here, if I can't find anything I will try investigating this further to see if I can help you get rid of those lines.

Let me know if you find out something, or if you cannot locate anything.

Eric,
I found the source of the lines. They were in the following the following bits of the IE 6 CSS (The problem lines have been commented out):


ul#cssmw ul li {
background-image: none;
/* border-bottom: solid 1px black; */
margin-bottom: -1px;
}

ul#cssmw li {
zoom:1;
background-image: none;
/* border-bottom: solid 1px white;*/
margin-bottom: -1px;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
}

When I first started wrestling w/ the IE problem, my main focus was getting the fly-out to appear & the wee lines and white background were secondary issues so any fixes that I may have made to these bits were lost in the general mess.

The improved IE 6 menu is now available at test.jpblack.com & the fly-out now appears on the left as it was originally intended.

Many thanks for your time, patience & help in sorting all this out.

Howard Parsons

I'm very glad to see that you got this worked out, sometimes debugging css issues in IE6 can become very difficult, good eye spotting the css in the IE only file like that. Hopefully someone out there on the internet will find this and save themselves a bit of time, thanks for posting back with the exact fix.

Thanks Howard!
Commenting out the border code worked for me too! Yeah!
Laurel