Css Flyout Categories Menu troubles

[inf1niti]

Someone pleeeeease explain how the heck i get this flyout menu to work in IE6. Ive noticed a few stores like performance-pcs.comand http://www.afrimusik.com/ work. How did they do it. Im tired of all night haha. Please help me out.

[HDG]

I'm also looking how to get the flyout menu to work on IE6. Thanks.

Also, disabled categories still show up on the menu. How can I fix this?

[HDG]

I believe the IE6 problem is this:
http://www.zen-cart.com/forum/showpo...&postcount=164

Still unsure about the disabled categories.

[lankeeyankee]

Can you post the specific problems that you have with ie6? link? I fixed this but I can't remember what I did, I think it might just be CSS fixes but when I see your problem(s) it is sure to jar my memory.

Matt

[Under pressure]

Hi, I have a problem with the css flyout categories menu. It works fine In Firefox but in IE when I hover the 'Hand Suction Lifters' link everything below the menu shifts downwards. see http://www.kilner-vacuum-lifting.com/kvshop.
I'm stumped by this problem... any help would be great?

[Under pressure]

Bump!...no one?

[cmwoods]

I hear you !!!

It's been a pain in the a*** for me too. I started my store in Nov 06 and in the following two months before we went live, this drove me mad too. I could get it to work in IE6, but not in FF. In order to get it to work in both, I have had to put up with this weird shifting issue in IE6 and for the past year, its been running like that.

Anyhow, after a year of being live, I'm currently going through the entire site once again, reviewing what I did, improving things, changing text to improve conversion and sales.

So a few weeks ago, I began to review the navigation of the menu and had another look at this, especialy since IE7 cures the problem, but still a large proportion of the worlds internet users are still using IE6 so I wanted to get to a point where I could have a menu which worked and behaved the same in IE6 7 and FF.

I have found two things. Firstly, you HAVE to have a small border on the bottom of your list items, as this is what causes the shifting in IE6, just one px will do, but if you don't set it at all, you get the shifting.

Secondly, and this is something which I still don't undertand myself is that in order to get this to work as I want it, with no margins, borders and images I have to have an additional closing comment marker towards the end of the stylesheet. If I get rid of it, the whole thing just looks a mess.

I've tidied up the stylesheet and added comments to each line so hopefully you can understand it if you not a CSS expert, which incidentally I aren't either.

Look at your own stylesheet and compare to this to see if any of it helps you out or just swap them and then change it for your own needs.

Other points to note which will not help: Don't change the order of the items in the stylesheet, moving them around will cause unintentional problems and don't set more than you need to in each area as this piling of valuves on top of other ones just make things worse too.

You can see the menu with the stylesheet below in action here : http://www.wilcodirect.co.uk

HTH

--

Chris


/* WD CSS Flyout Menu Stylesheet - CMW 13/02/2008 */
/* WinIE Behavior Call */
body {
behavior: url(includes/csshover.htc);
}

/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 150px; /* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
margin: 0; /* Sets sidebox to no margin - Set margin below for the CSS Flyout */
background-color: #1D4DA1; /* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
font-weight: bold; /* Set sidebox to bold text - Applies throughout entire sidebox and CSS Flyout */
}

/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 18px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 150px; /* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */
margin: 0; /* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
padding: 0; /* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD BLue - Applies throughout menu system unless overridden */
}

/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
}

/* Sets Category Text Background Options */
div#nav-cat li {
position: relative; /* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
list-style: none; /* Sets the list to display without any indentation or markers - Applies thorughout menu system */
margin: 0; /* Sets each line item to no margin - Applies throughout menu system */
z-index: 1; /* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */
border-bottom: 1px solid #1d4da1; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}

/* Sets Currently Hovered Category and it's parent category to orange background */
div#nav-cat li:hover {
background-color: #FF9900; /* Sets the background color of a line item which is being hovered over to WD Orange - Applies throughout menu system */
}

/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}

/* Sets currently hovered parent category on the Main Menu to orange background */
div#nav-cat li.submenu:hover {
background-color: #FF9900; /* Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}

/* Settings for Category Text */
div#nav-cat li a {
display: block; /* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
padding: 0.25em 0 0.25em 0.5em; /* Positions the text on each line item into a more central position - Applies throughout menu system */
text-decoration: none; /* Sets the text to disdplay normally with no unwanted effects - Applies throughout menu system */
width: 140px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
color: #FFFFFF; /* Sets the text to be white - Applies throughout menu system */
}*/ /* This strange closing comment mark seems to be necessary to get this to work properly */

/* Settings for the display of submenu blocks */
div#nav-cat ul a{
width: auto; /* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}

/* Settings for position of submenu blocks */
div#nav-cat ul ul {
position: absolute; /* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
top: 0; /* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
left: 150px; /* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
display: none; /* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}

/* Settings for extra submenu blocks */
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; /* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}

[Under pressure]

Nice post Chris!,

Looked at your CSS and your site..tried putting the 1px bottom border on menu but not working for me. I'm posting my css to see if you can spot anything a miss..I've been looking at it so long I'm begining to wonder if the problem is with this file or elswhere.

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

/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {width: 150px;
margin: 3px 0 0 0px;
background-color: #ffffff; font-weight:bold; font-size:12px;
text-align: center;
line-height: 23px;

}

/* Overall Settings for CSS Flyout Menu Area */  	
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: #ffffff;
background-repeat: no-repeat;
	}

/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {margin: 0px; padding: 0px; width: 150px; 
background-color: #ffffff;
border: none;
	}
	


/* Sets Category Text Background Options */
div#nav-cat li {background-image: url(../images/b1.gif); 
 position: relative;
 list-style: none;
 margin: 0px;
 z-index: 20; 
 height: 23px;
 width: 150px;
 border-bottom: 1px solid #D2DDF4; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}


/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {background-color: #ffffff;
}

/* Sets Currently Hovered Category and it's parent category to dark blue background */
div#nav-cat li:hover {background-image: url(../images/b1_over.gif);
 
}


/* Settings for Category Text */
div#nav-cat li a {display: block; padding: 0em 0em 0em 0em;
font-family: arial,Helvetica,sans-serif;
color: #666666;
text-decoration: none; width: 150px;
}


/* Settings for the display of submenu blocks */
div#nav-cat ul a {width: 150px;
}

/* Settings for position of submenu blocks */
div#nav-cat ul ul {position: absolute; top: 0; left: 152px;
display: none;
}

/* Settings for extra submenu blocks */
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;margin: 0 0 0 -2px; 

}

By the way your site is one of the best looking zen sites i've seen. I noted though you have the same issue with the 'sorter' showing through the menu flyout in ie6. I've still not solved this though.

Cheers

Nigel

[cmwoods]

get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.

I've got your CSS working on my test rig in all three browsers !!!

See if that helps.

P.S. Thank you for your kind comments regarding my handiwork and if your after any motoring essentials, don't forget about us !!

[Under pressure]

It works!!..would never have guessed to change those lines. Thanks

get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.

Do you have any thoughts about the problem with the 'product sorter' showing through the flyouts?..tried z-index but no joy

Maybe the thing to do is mod the css to move the sorter away from the menu.

will post if I can fix.

cheers