Css Flyout Categories Menu troubles

G'day,

I'm trying to get the CSS Flyout Category Menu mod to work with a new store I'm building using Zen Cart v1.3.5, see http://www.scubadoctor.com.au/diveshop/. However I'm getting some CSS browser compatibility issues. I thought I knew my way around CSS pretty well, but I'm totally stumped as to how to fix them.

With FF 1.5.0.7, the following sidebox jams up against the categoriescss sidebox. That is, the .leftBoxContainer margin-top:1em attribute just doesn't seem to work.

Also with FF 1.5.0.7, a part of the box border goes missing at the top.

Neither of these problems show up in IE6.

But IE6 has its own problems. The width of the first level category items goes outside of the box border. This has a flow on effect in that some of the second level menu get covered by the first level, plus the whole sidebox is slightly wider than it should be.

Any help with the above problems would be much appreciated.

Best Regards, Lloyd Borrett.

G'day,

I've finally managed to fix both my IE6 and FF related problems.

Taking out float:left; from div#nav-cat fixed the FF problems.

Adjusting the width of div#nav-cat li a, seems to have fixed the IE6 problem.

Best Regards, Lloyd Borrett.

G'day,

Just when I thought I had this sidebox addition sorted, I've struck another browser compatibility problem.

The flyout menus are going under the "Filter results by" manufacturer dropdown box when viewed in IE6. FF is working fine.

See http://www.scubadoctor.com.au/diveshop/index.php?main_page=index&cPath=67 for an example of the problem.

I thought it would be a simple case of adding appropriate z-index values in the right places. But so far I've tried a lot of places and values and not had any success.

I'd be most grateful if anyone has a solution, or can point me in the right direction.

Best Regards, Lloyd Borrett.

Hi,

I am in the process of migrating a site from 1.2.6 to 1.3.5 and I experience a strange problem with this contribution : I have customized it to use it for the information menu : no problem with 1.2.6, no problem with 1.3.5 and firefox, but with 1.3.5 and IE, the categories menu works well, but the information menu doesn't... The only workaround I found was to replace the csshover.htc file by an older version (v1.11.040203, the one that was meant to work with zencart 1.2.6).

The dev site can be seen at : http://www.anneg-lingerie.com/anneg135

Thanks for any hint.

Christophe.

PS : by the way, I still have the flickering issue with IE and the currencies sidebox...

Something weird is happening with my site which I don't get. When I enter the URL (domain name) without www, css flyout menu works fine. If I enter it with www, flyout menu doesn't work. There's an error (error message bottom of the browser) that says: "access is denied to: www.domain.com/store/includes/csshover.htc" (domain.com is an example).

I tried it in both IE 6 and 7.

Any help would be appreciated.

Hi,

I finally solved my IE flickering problem by specifying the currencies'sidebox :
#currencies { width: 148px; /* to avoid IE flickering */ }

I am now trying to have flyout menus working with IE7...

Christophe

I have the Css menu working "nearly" perfectly with two small exceptions. Suggestions would really be appreciated. In IE6 and in Opera the left border is mission around the main box. Fine in FF. In all browsers I'm getting what appears a double line beteen Specials, New Products and All Products vs. the 1 px line. I've tried removing the bottom border, however it removes all lines except those. Of course then I only have a 1px line between the previously mentioned items. So I would think the bottom border for those items is being pulled from somewhere else... where I'm not exactly sure. I've gone all through the two style sheets and did not find anything that jumped out at me.

Any help would really be appreciated.

Link to the site: http://69.50.202.136/

Here's my stylesheet_categories_menu.css

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 180px; margin: -1px 0 0 -1px;
background-color: #7C0425; font-weight:normal;}
div#nav-cat ul {margin: 0; padding: 0; width: 180px; background-color: #000000;
border: 1px solid #7C0425;}
div#nav-cat ul.level2 {background-color: #000000;}
div#nav-cat ul.level3 {background-color: #000000;}
div#nav-cat ul.level4 {background-color: #000000;}
div#nav-cat ul.level5 {background-color: #000000;}
div#nav-cat ul.level6 {background-color: #000000;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
margin-top: 5px; / change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #7C0425; <---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: #7C0425;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #000000;}
div#nav-cat li.submenu:hover {background-color: #7C0425;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 180px; color: white;}
border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: #7C0425;}
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 180px;
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;}

shqipo:

Something weird is happening with my site which I don't get. When I enter the URL (domain name) without www, css flyout menu works fine. If I enter it with www, flyout menu doesn't work. There's an error (error message bottom of the browser) that says: "access is denied to: www.domain.com/store/includes/csshover.htc" (domain.com is an example).

I tried it in both IE 6 and 7.

This post should help you sort it out:
http://www.zen-cart.com/forum/showpost.php?p=115159&postcount=164

This is a way to do it the opposite direction:
http://www.zen-cart.com/forum/showpost.php?p=146762&postcount=210

How can I configure css flyout menu so that the page display not only the products in certain category, but also the "new products", "featured products" and "Specials" boxes?

These boxes will be displayed if you are using the normal style category side-box.

At the same time, how come the product page displays products without any borders? Can borders be turned back on?

DrByte:

This post should help you sort it out:
http://www.zen-cart.com/forum/showpost.php?p=115159&postcount=164

This is a way to do it the opposite direction:
http://www.zen-cart.com/forum/showpost.php?p=146762&postcount=210

This is a line of code missing in the first post (postcount=164) above. Compare to postcount=210, the complete code for post #164 should've been:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

I tried it on my site. It worked. Now, I have one little problem. I installed Google Language Translate Sidebox on my site. Whenever I use it, it will take me to google translate engine, which will strip the "www" from the actual url of my site and leads to css.htc unaccessible yet again.

Is there any solution to this problem?

Google language translate works pretty good when it comes to Spanish. I figured if I were to sell in the North America region, Spanish translation of my site will definitely be a plus. So, I really want to keep this contrib and have it work with CSS Flyout Menu.

Please help.

hello
can somebody give me a hand and guid me, how can I put my category sidebox on the right side, and getting the subcategories towards left.

thanks in advance

reza:

can somebody give me a hand and guid me, how can I put my category sidebox on the right side, and getting the subcategories towards left.

Essentially this requires making stylesheet changes to position left instead of right, and using some negative left-margin settings.

DrByte:

Essentially this requires making stylesheet changes to position left instead of right, and using some negative left-margin settings.

thanks DrByte
I knew that I have to change some position or other parameters from left to right and vice versa, the problem is that I did not finf any position parameter in flyout stylsheet.css, and stylsheet_category_menu.css, look the last one, if here I should change , so where???

stylsheet_category_menu.css

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color: #3C097A;
/ border: 1px solid #AAA;/}
div#nav-cat ul.level2 {background-color: #3C097A;}
div#nav-cat ul.level3 {background-color: #3c097A;}
div#nav-cat ul.level4 {background-color: #3C097A;}
div#nav-cat ul.level5 {background-color: #3C097A;}
div#nav-cat ul.level6 {background-color: #3C097A;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
margin-top: 5px; / 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 /
z-index: 1;
}
div#nav-cat li li {
margin: 0; / this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #CE318C;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #3c097A;}
div#nav-cat li.submenu:hover {background-color: #CE318C;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: white;}
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
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;}

div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}
```change to:```
div#nav-cat ul ul {position: absolute; top: 0; [B]left: -140px;[/B]
display: none;}

DrByte:

div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}
change to:
div#nav-cat ul ul {position: absolute; top: 0; [B]left: -140px;[/B]
display: none;}

YOU ARE NICE DrByte
totally on zen 1.3.5 and now on 1.3.6, I spent more than 3 fulltime days(because I am very newbie) to solve this problem and I did not want disturb the zen peroples with my questions, and lastly I wanted to abandone it, 
its okey now, although there is still no answer to the common question of some other peoples also me about putting the counts of products in flyout , I think there can not be done otherwise there came minimum one answer for it.

thanks again:smartass:

Displaying Category Counts

/includes/classes/categories_ul_generator.php
approx line 81 replace:$result .= $category['name']; $result .= '</a>';with this:```
$result .= $category['name'];
$catcount = zen_count_products_in_category($category_id);
if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $catcount == 0) or $catcount >= 1) {
$result .= CATEGORIES_COUNT_PREFIX . $catcount . CATEGORIES_COUNT_SUFFIX;
}
}
$result .= '</a>';

Category count settings in Admin->Config->Layout Settings will still be used to control display.

DrByte:

Displaying Category Counts

/includes/classes/categories_ul_generator.php
approx line 81 replace:$result .= $category['name']; $result .= '</a>';with this:```
$result .= $category['name'];
$catcount = zen_count_products_in_category($category_id);
if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $catcount == 0) or $catcount >= 1) {
$result .= CATEGORIES_COUNT_PREFIX . $catcount . CATEGORIES_COUNT_SUFFIX;
}
}
$result .= '</a>';

> Category count settings in Admin->Config->Layout Settings will still be used to control display.

ooooof
You are very rapid DrByte
I am still busy to change font color in flyout category sidebox about 2 hours without any results, and YOU in between wrote the new code for counts of category.
Let me say you Bravo.
very thanks:shocking:

Hi

This is a great mode but i have a little problem with IE6.

• I have 3 top leave categories
• my sideboxes are 195px
• under IE7 everything works perfect with the CSS stylesheet. perfectly aligned, etc.

Under IE6, the subcategories of the top 2 categories only allow selecting once. Then they no longer open. Also, the right boarder is about 5px too wide.

Greatful for any assistance

Someone please help, i am going out of my mind with getting the CSS to work properly.

I am trying: IE6, IE7, Firefox, Netscape.

I finally got the menus to align almost on all four browsers.

Now i have two problems i can't seem to solve: -

1. In all browsers except IE6, the 2nd level categories appear transparent until the are highlighted.

div#nav-cat li a {
display: block;
text-decoration: none;
width: 185px;
color: white;
padding-bottom: .25em;
padding-top: .25em;
background-color: transparent;
margin-right: 0px
}

If i change the above background colour from transparent, i can see the menus but then the highlights are behind categories.

2. i have the rounded corners mode and the sidebox header of the next box is under the categories box footer which is under the categories list on netscape and firefox. They are fine on IE 6&7 though.

Lastly, slightly off topic i have transparent backgrounds for my images, in Firefox, Netscape and IE7 they appear transparent, but under IE6 the backgrounds appear grey.

Really appreciate any help you all can offer.

cheers