Support for CSS Flyout Menu

[cmwoods]

I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.

I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.

Thanks,

-Shawn

Hi

You are welcome to look at www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.

I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.

HTH

[nightwolff]

Hi

You are welcome to look at www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.

I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.

HTH

Hi, I was able to get another borrowed script to work properly. It may have been that when I tried to use yours the browser never cleared all of mine from the cache and I may not have hit Ctrl-F5 when I tried it.

I went through my css and checked every line to see what was in it that was not in the other script. After some trial and error and a few Ctrl-F5s to clear cache I found the problem. It appears the offending line was under "div#nav-cat li" where I had somehow gotten a "height: 17px" in it. Once I commented that line out everything started behaving properly like the borrowed script. Thanks for your help!

-Shawn

[ckosloff]

Guys,

Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.

------------------------------------------------------------

body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}

div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}

div#nav-cat ul.level3 {
background-color: transparent;
}

div#nav-cat ul.level4 {
background-color: transparent;
}

div#nav-cat ul.level5 {
background-color: transparent;
}

div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}

div#nav li a:hover {
border: none;
}

div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}

[cmwoods]

Guys,

Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.

------------------------------------------------------------

body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}

div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}

div#nav-cat ul.level3 {
background-color: transparent;
}

div#nav-cat ul.level4 {
background-color: transparent;
}

div#nav-cat ul.level5 {
background-color: transparent;
}

div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}

div#nav li a:hover {
border: none;
}

div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}

Hi

I'm not able to get access to IE6 until Monday, but your hover problem will be because IE6 needs the csshover.htc file to work, whereas IE7 and FF don't.

Your stylesheet cannot find it. Change the top line of your CSS to includes/csshover.htc and put said file there too. As the mod is originally supplied, it assumes too much about how people follow instructions. You should have the file somewhere already, but it is not being found at the moment by the use of the relative path.

HTH

[ckosloff]

Hi

I'm not able to get access to IE6 until Monday, but your hover problem will be because IE6 needs the csshover.htc file to work, whereas IE7 and FF don't.

Your stylesheet cannot find it. Change the top line of your CSS to includes/csshover.htc and put said file there too. As the mod is originally supplied, it assumes too much about how people follow instructions. You should have the file somewhere already, but it is not being found at the moment by the use of the relative path.

HTH

Nice try, but the mother ############ IE6 doesn't want to know anything about it
BTW the correct path in the stylesheet is:
body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}
assuming it is in folder "includes", as the mod originally installs it, the mod should be updated.
In my case, the stylesheet is in includes/templates/CUSTOM/css/, which explains the path to csshover.htc.
If you want to have IE6 in your dev computer, install Virtual PC 2007 + SP1 (free from MS).
Then create a virtual machine with 2KPro.
There are other problems IE6 creates like breaking the sidebox where the menu is installed, but we'll get to that later.

[cmwoods]

Nice try, but the mother ############ IE6 doesn't want to know anything about it
BTW the correct path in the stylesheet is:
body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}
assuming it is in folder "includes", as the mod originally installs it, the mod should be updated.
In my case, the stylesheet is in includes/templates/CUSTOM/css/, which explains the path to csshover.htc.
If you want to have IE6 in your dev computer, install Virtual PC 2007 + SP1 (free from MS).
Then create a virtual machine with 2KPro.
There are other problems IE6 creates like breaking the sidebox where the menu is installed, but we'll get to that later.

Hi,

I may have misunderstood you earlier, the csshover.htc is required to get the menu to work at all in IE6. If it does work then that's not your problem but I have seen a number of people (myself included!) who get confused as to where it needs to be located, so mine uses a hard-coded path to prevent it happening.

I notice you appear to have a missing -cat on your li a:hover line towards the bottom. That may be a line to investigate.

HTH

[ckosloff]

Hi,

I may have misunderstood you earlier, the csshover.htc is required to get the menu to work at all in IE6. If it does work then that's not your problem but I have seen a number of people (myself included!) who get confused as to where it needs to be located, so mine uses a hard-coded path to prevent it happening.

I notice you appear to have a missing -cat on your li a:hover line towards the bottom. That may be a line to investigate.

HTH

The location of the file relative to the stylesheet is given to me by the style editor that I use (Top Style Pro).
I tried your suggestion, it is indeed a nice catch, because it is a syntax error in the stylesheet, and IE6 is not forgiving of those.
However, the ########## is still misbehaving
The correction has no effect on the other browsers, nor on IE6, it acts impervious to all my tries.
I left it there, just in case.
Let it be known that the contrib is released with the error.
Original line:
div#nav li a:hover {border: none;
}
FYI, I did eliminate some errors in IE6 by adding this line:
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
}

Have a nice weekend!

[zubenubi]

Hey there,

I've spent the last couple of days trying to get this menu working as I want. I've read through this thread pretty much completely and I know there's issues with IE6 and some have given up and just accepted the fact that IE6 is sh1te and will probably continue to plague us for years to come.

But... all I want is to have the category text link to have a little 10px margin. If I put a 10px padding-left into into div#nav-cat li a, then that works fine on everything else but not ie6 which increases the horizontal size of the sidebox and means that the pop up menu disappears as you approach it with the mouse.

All I want is to not have the text hugging the left margin...

Is there absolutely no way to just make that happen? After that all I want to do is to insert images as the backgrounds and I'm good to go. I'm fairly sure that's easy enough.