Css Flyout Categories Menu troubles

Hi,

I installed the mod and everything seems to work right, except part of th edesign i just cant figure out.

There is this brownish border I cant find it anywhere to get rid of it.

Any idea?

Thank you very much.

regards,
kruna

oh... I am sorry i fogot to ask, I would like to have the flyout deign only for category not for specials, featured, new and all, is this possible?

Thanks
regards,
kruna

Get tired hitting my head to the wall. :frusty:
I just cant figure out what I messed up.

css flyout menu side box has strange light brown lines

http://fotonapakymppi.fi/kymppi_cart/index.php?main_page=index&cPath=2

marksu

Hi Marksu,

today is your lucky day...I also just spent like hopurs on the same issue, decided to post as you can see above and few minutes ago I got the solution....even didnt have time to post an update...

go into your stylesheet and find

div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
}

should be at the beginning line 11

change background-color: transparent
to #ffffff or which color you want...

regards,
kruna

Marksu,

I forgot to add taht you also have to delete > solid tan

regards,
kruna

Thanks for the help.
I must admit it was my lucky day.

One thing I wonder is why does it not use the same borderimages on the sides.
The header is same though as other boxes.

marksu

Kruna:

Hi Marksu,

today is your lucky day...I also just spent like hopurs on the same issue, decided to post as you can see above and few minutes ago I got the solution....even didnt have time to post an update...

go into your stylesheet and find

should be at the beginning line 11

change background-color: transparent
to #ffffff or which color you want...

regards,
kruna

I am sorry I dont know what you mean I guess my skills are very limited to be able to provide you a proper answer on this...
I am glad it worked...

regards,
kruna

I just ment that comparing to flyout sidebox border and the other side boxes they differ. Flyout sidebox for me do not have any borders only the header.

Al also have a feeling that border where there in the begining when flyout menu mod was installed. Not sure though.

marksu

Kruna:

I am sorry I dont know what you mean I guess my skills are very limited to be able to provide you a proper answer on this...
I am glad it worked...

regards,
kruna

opaply need to reinstall the flyout menu mod to get that fixed.

marksu

I now even reinstalled the flyout mod but still having problems.

The new sidebox dont have the default sidebox borders like al the other sideboxes have.

see here
http://fotonapakymppi.fi/kymppi_cart/index.php?main_page=index&cPath=3

marksu

Btw removing the "solid tan" is enaf to get the brown lines away.
No need to edit transparency.

If somebody figure solution to my other problem which was the missing sidebox borders I would apreciate it.

see here
http://fotonapakymppi.fi/kymppi_cart/

marksu

Kruna:

Hi Marksu,

today is your lucky day...I also just spent like hopurs on the same issue, decided to post as you can see above and few minutes ago I got the solution....even didnt have time to post an update...

go into your stylesheet and find

should be at the beginning line 11

change background-color: transparent
to #ffffff or which color you want...

regards,
kruna

marksu:

Btw removing the "solid tan" is enaf to get the brown lines away.
No need to edit transparency.

If somebody figure solution to my other problem which was the missing sidebox borders I would apreciate it.

see here
http://fotonapakymppi.fi/kymppi_cart/

marksu

Any help would be apreaciated.

Could it be that somehow the css flyout menu has the borders but are somehow hidden underneath?

Or

Are the css flyout sidebod table wrong width that the border are outside the table therefore not displayed?

Any help anyone?

marksu

Hi

The css flyout works fine on the site I am dsigning for a client in Firefox, but the menu shifts in IE6. It's very annoying. Any ideas?

Site is an adult Store

http://www.funtimz.co.uk

Cheers

Cal

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 :frusty: all night haha. Please help me out.

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?

I believe the IE6 problem is this:
http://www.zen-cart.com/forum/showpost.php?p=115159&postcount=164

Still unsure about the disabled categories.

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

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?

Bump!...no one?

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