Support for CSS Flyout Menu

[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!

[airbag]

There is another contrib for that, look in the Downloads section, type menu in the searchbox.

Hmm. with that css that I posted, you should be getting NO imges. I've actually got a more recent css that I worked on for a client that has NO images in it. The css looks like this:

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #838367;
     width: 95%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.0em;
}
div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 100%; 
         background-color: #838367; 
         z-index: 1000;
/*  border: 1px solid #AAA;*/
}

div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}

div#nav-cat li {
    z-index: 1; 
        position: relative; 
        list-style: none; 
        margin: 0;
    margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
    margin: 0; /* this overrides the margin-top in the declaration above */
} 
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
        display: block; 
        padding: 0.25em 0 0.25em 0.5em;
    text-decoration: none; 
        width: 99%; 
        color: #CDB38B;
}

div#nav-cat>ul a {
        width: auto;
}

div#nav-cat ul ul {
        position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
}

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; 
        background-color: #756783;
}

That should make it look EXACTLY like the attached thumbnail:



Though, I see you have been working on it, but you STILL got those images that you initially DIDN'T want. Change to this css (no images), then you can edit the colors the way you want. If you've decided you want images, and need help, just let me know. I'm sorry I haven't been around like I said I would, but I've been VERY busy with a 7-day a week job, 3 boys, 1 wife, 1 dog, 24,000 chickens, a website for a client that I'm already late on, and living on no sleep (3-4 hrs/night) to do it all. But, I DO still check in when I can, so don't give up.
I'll answer your other questions as soon as you know for sure if you want the images, or not.

Hope this helps.

Thanks for your posting, this version of CSS above really helped with some IE6 and IE7 issues when using version 1.3.8a of zencart. I suggest anyone who has issues with IE6 does a compare with the built in CSS and the above to get ideas on how to limit these.
airbag

[ckosloff]

Thanks for answer.
I will give it a shot.
In fact, I have prepared a virtual machine with nothing in it except 2KPro and IE6.
It also has the XAMPP server installed, so I can test locally instead of disturbing my live site all the time.
In fact, I only need to butcher those IE6 quirks, everything looks fine in IE7 and Firefox.

[cmwoods]

Thanks for answer.
I will give it a shot.
In fact, I have prepared a virtual machine with nothing in it except 2KPro and IE6.
It also has the XAMPP server installed, so I can test locally instead of disturbing my live site all the time.
In fact, I only need to butcher those IE6 quirks, everything looks fine in IE7 and Firefox.

Hi

I am now sat in my office with a number of PC's and have got your site in IE6 on XPSP2 on show with your CSS on a test installation here too looking similar to how you have it on your live site

Once again, I'm pretty certain your csshover.htc is NOT being found. Change that top line to includes/csshover.htc and ensure the file is present and accessible and not restricted in anyway. I can make your CSS hover work just by changing that line. The relative path is too confusing so lets get rid of it and eliminate it.

If you can confirm that you have done that, I'll continue to sort out the display as it is very similar to the problem I had originally.

HTH

[ckosloff]

Hi

...Once again, I'm pretty certain your csshover.htc is NOT being found. Change that top line to includes/csshover.htc and ensure the file is present and accessible and not restricted in anyway...

HTH

You were right on the money about csshover.htc
I changed the line and now it works in IE6.
IE7 and Firefox don't care about these changes.
Strange that now Top Style Pro says it cannot find the file, however IE6 does...
I already FTPed the changes so you will be able to see them in your IE6.
Thank you very much for the suggestion, I was totally confused with the style editor reporting something different.
There's another problem that I need your help to tackle:
IE6 breaks the sidebox.
According to the Web Dev toolbar, the thing that is breaking it is an element "a".
If you have this extension installed, go to Information --> Display Element Information and click on any link in the Catalog.
It reports that the element has a width of 160px. and a height of 28px.
I have set totally different dimensions in my stylesheet (150 * 20).
IE7 and Firefox, though they read the dimensions as 160 * 28, display the element correctly, while IE6 displays it verbatim.
I cannot figure out how to make it obey the commands in the stylesheet.
Thanks in advance.

[cmwoods]

You were right on the money about csshover.htc
I changed the line and now it works in IE6.
IE7 and Firefox don't care about these changes.
Strange that now Top Style Pro says it cannot find the file, however IE6 does...
I already FTPed the changes so you will be able to see them in your IE6.
Thank you very much for the suggestion, I was totally confused with the style editor reporting something different.

Computers are wonderful things aren't they? I had the same problems too a while back and it drove me mad too. I just ended up spending 2 days doing nothing else but get this menu working as I wanted it.

There's another problem that I need your help to tackle:
IE6 breaks the sidebox.
According to the Web Dev toolbar, the thing that is breaking it is an element "a".
If you have this extension installed, go to Information --> Display Element Information and click on any link in the Catalog.
It reports that the element has a width of 160px. and a height of 28px.
I have set totally different dimensions in my stylesheet (150 * 20).
IE7 and Firefox, though they read the dimensions as 160 * 28, display the element correctly, while IE6 displays it verbatim.
I cannot figure out how to make it obey the commands in the stylesheet.
Thanks in advance.

I'll have a proper look tomorrow, but I'd get rid of your first line-height declaration for starters. As you are using images for your backgrounds, it's not really needed.

[ckosloff]

Thanks a lot for help.
I'll be tinkering with them stylesheets in the evening.
Will check the suggestion on line-height.
Tomorrow.

[ckosloff]

Sorry to say, eliminating line-height is not the answer.
It will break the sidebox.
However, I did find some answers for making it look acceptable in IE6.
I am already resigned to the fact that this menu will never work flawlessly in that browser, and I cannot modify the stylesheet to fit that browser, to the prejudice of "good" browsers.
I also had to make some changes in main stylesheet.
Nevertheless, I am making good progress.
Will post results of my research here.

PS. Already found what was inflating the sidebox.
It's the padding or margin that I inserted in the "a".
However, that was needed for esthetical purposes in "good" browsers, that have no problem in rendering it correctly.