Support for CSS Flyout Menu

[gee38l]

There are quirks in IE that we cannot fix, we just have to live with them.
Try this, post #144, maybe the new version of htc can fix it.
Sorry, I don't have time to test now, my site is in trouble with PCI-compliance.

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

[ckosloff]

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

Still not working, but if you are patient enough I will take a look at your files when I have the time. Sorry but hard-pressed now.

[gee38l]

Still not working, but if you are patient enough I will take a look at your files when I have the time. Sorry but hard-pressed now.

Thanks for confirming! Just going insane trying to fix this issue i looked at a few websites linked in previous post and they all seem to be working fine..

Oh and i also copied the coding from a an earlier post #20 and just changed the colours

[gee38l]

ckossloff,

Just wondering if you have had a chance to look at my problem?

Thanks,

gee38l

[gee38l]

I just noticed that the links in IE6 seem to be working just not IE7... also the link is not the entire box in mozilla, ie6 or safari small part is cut off at the bottom.

[pglock]

I've been using zencart for several years using it to build the online store part of www.splatcooking.net . The store ( store.splatcooking.net ) is currently running on the core 1.3.8a files with a few mods added. Our production site has gathered the cruft associated with the mantra of "don't remove anything, it might break the site".

I'm doing an end of year tidy up, trying to add nicer menus based on this mod. I have uploaded the includes and the .htc file in, I think, the appropriate places. The new stylesheet is correctly included in the sorce of the main store page. However, I don't see any change to the menus. Do I need to add any additional code to the main stylesheet?

Regards
Peter Glock

[pglock]

Just to add, the template is cherry_zen and I'm using Safari on a Mac to access the site.

[weber]

the fly out work great in FF, however, there are problem in IE.

the categories link, <a xxxx></a> has a left margin padding to it's <li> wrapper, while FF does not has that space...

I set ul, li {padding:0; margin:0} and the spacing still there...

[preman]

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

[gee38l]

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

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: white;
}

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;

This is the coding that i used from a previous post and just changed the colours....