close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Problems w/ IE 6

Thread began 8/17/2009 9:34 pm by htp372188 | Last modified 11/07/2009 3:16 pm by laurelb | 3073 views | 9 replies |

htp372188

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

Attached Files
CSS_Menu.zip
Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

htp372188

RE: Problems w/ IE 6

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

Howard Parsons

Sign in to reply to this post

htp372188

Opening A Can Of Worms

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

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

htp372188

Success!

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

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

htp372188

Problem Sorted!

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

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

laurelb

Removing unwanted lines in IE6

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

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...