Support for CSS Flyout Menu

[musicfreer]

thanks a lot
just strange that even I added the semicolon, IE7 still show the exclamation mark at the left bottom corner, though it is working fine, buyer may lose confidence if they see a problem occurring at the site

I am still trying to get rid of it, any idea will be helpful!

ok, now I deleted the comment

# Force the plain domain name if came in with extra (www, etc)

everything is fine now, thanks!

[ckosloff]

Vertical-align is only for inline and table elements - doesn't work on block elements. You might try adding "display: inline;", since you've got a "line-height:" set. Other than that, you might just try using padding: settings to align it vertically. Sorry, I missed the "vertical" part in the previous posts. I've been trying to read too much, too fast. Gotta slow down a bit, I guess.

Hope this helps.

Get Em Fast,
If you are still alive:
I was stumped on the links aligning bottom and couldn't get vertical-align: middle to work.
Tried your suggestion and it didn't work either, so I decided to get logical: fired up Web Dev toolbar, checked what the hell was that link thing and "discovered" it was an a.
So I went to this selector in the related css:

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

Replaced "block" by "inline" and it works great.
I was fumbling around in the wrong selector.
Duh!!
Thanks.

[ckosloff]

Uh, oh.
Posted too fast.
Actually display:inline looks good but doesn't work that good, you need block to display deeper sub cats.
They do show but I was unable to access and click on them, so a little more work and got the final version of that selector.

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;}*/
    }

[nightwolff]

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

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

[poosk]

Can I somehow add manufacturer drop down to the menu as well?!?!?!

[ckosloff]

Can I somehow add manufacturer drop down to the menu as well?!?!?!

That's not a supported feature.
You will need custom PHP programming for that.
ZC is open source, so good luck.

[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