Support for CSS Flyout Menu

cmwoods:

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:no:
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.

ckosloff:

Nice try, but the mother ############ IE6 doesn't want to know anything about it:no:
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

cmwoods:

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 :lamo:
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!

ckosloff:

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

Get Em Fast:

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

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

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.

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.

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

cmwoods:

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.

ckosloff:

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.

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

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.

Ok I've searched the forum left and right and have come close but can't nail down where I can get rid of or reduce the top margin space in my left category link box....I have a custom template and the css flyout installed, see my site below....
http://www.bizmug.com/zencart/

PLEASE HELP ME!

THANKS IN ADVANCE!

CHRIS

cevans73:

Ok I've searched the forum left and right and have come close but can't nail down where I can get rid of or reduce the top margin space in my left category link box....I have a custom template and the css flyout installed, see my site below....
http://www.bizmug.com/zencart/

PLEASE HELP ME!

THANKS IN ADVANCE!

CHRIS

The problem is caused by your custom template.
If you look at that element in your Web Dev toolbar, you will see that it is a "td" (table data), coming, obviously, from a table.
Search for that table in your template and kill the td.
PS. If you don't have Web Dev, rush and install it. It is a free Firefox extension, indispensable.
Then go to Information --> Display element information. Mystery solved.

Regarding the issue of getting the menu to work in IE6.
I finally achieved a cross-browser setup.
It does work in IE6, but I had to sacrifice some features, like unable to make the text align left because you cannot insert padding in IE6 without breaking the sidebox, and the text is rendered without any separation from the left border.
Of course, I can disguise this by making the sidebox without borders.
Also, cannot insert a space between the first and second cats. for the same reason., in this case, the second cat. disappears when moving to it.
In short, I cannot prevent the inherent goofiness of this browser, but it works acceptably well.
If anybody interested, will post the cat. stylesheet and the main stylesheet in zip format, in order not to cram this thread too much (yes, I had to tweak the main CSS too).
There is a hack in the contrib itself: includes --> templates --> YOUR_TEMPLATE --> sideboxes --> tpl_categories_css.php, it is explained in the file itself so there is no need to post it here.
That hack might prove useful dealing with IE6 issues, I implemented it, didn't see much difference, but it does no harm.

ckosloff:

Regarding the issue of getting the menu to work in IE6.
I finally achieved a cross-browser setup.
It does work in IE6, but I had to sacrifice some features, like unable to make the text align left because you cannot insert padding in IE6 without breaking the sidebox, and the text is rendered without any separation from the left border.
Of course, I can disguise this by making the sidebox without borders.
Also, cannot insert a space between the first and second cats. for the same reason., in this case, the second cat. disappears when moving to it.
In short, I cannot prevent the inherent goofiness of this browser, but it works acceptably well.
If anybody interested, will post the cat. stylesheet and the main stylesheet in zip format, in order not to cram this thread too much (yes, I had to tweak the main CSS too).
There is a hack in the contrib itself: includes --> templates --> YOUR_TEMPLATE --> sideboxes --> tpl_categories_css.php, it is explained in the file itself so there is no need to post it here.
That hack might prove useful dealing with IE6 issues, I implemented it, didn't see much difference, but it does no harm.

Please do post the hack. I know I'd be interested in taking a look.

I just wanted to say thanks to cmwoods and point out this great contribution from page two of the thread. For those of us who want to get right down to the basics of a CSS flyout menu in order to integrate it with the look and feel of their template, this stylesheet is a much better starting point.

Maybe it could even be included as an alternative in the next release of the contribution.

cmwoods:

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

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

Mark Kidd:

Please do post the hack. I know I'd be interested in taking a look.
I don't know what you mean by the hack exactly.
The onfocus="this.blur()" hack is explained in the file that I mentioned, just look at it.
The other thing is the css that I used.
I am posting my related css in zip format, just download and enjoy.
Caveat: these css work on my site, might not work in yours, just play around with the values.

ckosloff:

I don't know what you mean by the hack exactly.
The onfocus="this.blur()" hack is explained in the file that I mentioned, just look at it.
The other thing is the css that I used.
I am posting my related css in zip format, just download and enjoy.
Caveat: these css work on my site, might not work in yours, just play around with the values.

Sorry to have misspoke -- upon a reread, I can see that you were only using the term in reference to the PHP edit rather than your additions to the template.

And thanks for contributing your work. I'll be looking through it this week.

Mark Kidd:

Sorry to have misspoke -- upon a reread, I can see that you were only using the term in reference to the PHP edit rather than your additions to the template.

And thanks for contributing your work. I'll be looking through it this week.
There is some other stuff that might be useful, e.g. how to correct the blank image, or suppress the New Products, but it's all posted.
I think this mod needs a rewrite, but I don't have the time now.

One of the issues I had upon installing this add-on was that my columns are set somewhat wider than the Zen Cart defaults. CSS Flyout Menu hard-codes these values into the stylesheet_categories_menu.css, which isn't the worst thing in the world but I thought I would see if I couldn't make things a little more elegant by pulling the column width from the database and using that to size the flyout menu proportionally.

This requires changes to three files, and anyone else who is interested should consider this mod to be untested - I can't really guarantee that it'll work for you, but it seems to be doing the trick for me.

1. Comment out each of the 'width' statements in stylesheet_categories_menu.css.

2. Here is my modified tpl_categories_css.php

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: tpl_categories_css.php 2004/06/23 00:00:00 DrByteZen Exp $
//
    $content = "";
    $column_width_style = 'style="width: ' . $column_width . '"';
    
    $content .= '<div id="nav-cat" ' . $column_width_style . '>';
    
    $content .= $menulist; // see the modules/sideboxes/YOURTEMPLATE/categories_css.php for this
    
    
  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
     $content .= '<ul class="level1" ' . $column_width_style . '><li><a href=""> </a></li></ul>';  // insert a blank line/box in the menu
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $content .= '<ul class="level1" ' . $column_width_style . '><li><a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a></li></ul>';
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      $content .= '<ul class="level1" '. $column_width_style . '"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a></li></ul>';
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<ul class="level1" '. $column_width_style . '><li><a href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a></li></ul>';
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<ul class="level1" '. $column_width_style . '><li><a href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a></li></ul>';
    }
  }
  $content .= '</div>';


// May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked.
// just parse the $content string and insert it into each A HREF tag

?>

3. And here is the modified categories_css.php:

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: categories_css.php 2004/06/23 00:00:00 DrByteZen Exp $
//

  // load the UL-generator class and produce the menu list dynamically from there
  require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
  $zen_CategoriesUL = new zen_categories_ul_generator;
  $menulist = $zen_CategoriesUL->buildTree(true);

  $flyout_width = $column_width - 10;
  $flyout_width_styled = '<a style="width: ' . $flyout_width . 'px"';

  $menulist = str_replace('<a', $flyout_width_styled, $menulist);
 
  require($template->get_template_dir('tpl_categories_css.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_categories_css.php');

  $title = BOX_HEADING_CATEGORIES;
  $left_corner = false;
  $right_corner = false;
  $right_arrow = false;
  $title_link = false;

    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);

?>

All these changes do is dynamically add the width as an inline style to the same elements which were previously being styled using the stylesheet. Aside from making it easier to adjust the width of the columns, it should also make this add-on play a little bit nicer with other add-ons and template mods that style the output of categories_ul_generator.

Thanks Ckosloff for the update...I just noticed the flaw from IE6 and your update works great, thanks for sharing!

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Here is my link......
http://www.bizmug.com/zencart/

Thanks again for your help!
Chris