X-Cart forums

[just_me]

I just installed the fancy categories flyout menu. It looks great everywhere except on the home.php page. It flys out"under" the central block. Anybody know what css I need to fix or is the problem elsewhere?

[cflsystems]

Does this happen in all browsers or IE only? You may ned to apply z-index property on parent element and menu to get it to show on top of all elements

[just_me]

Yes, that worked. I put a z-index: 1; and all is well. Sometimes the fix is easy. Thanks! :P

[chudnovsky]

Hi,
Can you please tell me where you found the location to place the z-index for the menu , for the life of me I can't find where to add the z-index.

Thanks very much

Cheers,
Alex

[just_me]

Heh, it's been a while since I did that but here's where I have set z-index 1 in my css for category menus

 .fancycat-icons-scheme li:hover ul,
  .fancycat-icons-scheme li.over ul
{
  display: block;
  overflow: visible;
  z-index: 1;
}


.menu-fancy-categories-list .content {
  overflow: visible;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 6px;
  z-index: 1;
}

Hope that helps. If not, let me know and I'll take a closer look on Monday.

Have a nice weekend.

[gatordp]

I am having this same problem. The flyout is underneath the main content blocks so you cannot see the category titles.

I tried adding a z-index:1; in the two places shown above by just_me in the main.css for Fancy Category.

Any ideas? I'm trying in both Firefox and IE

[cflsystems]

It may be the overflow property of the parent containers
url would help to be more specific

[mtputer.com]

I am having the same issue with v4.4 testing and I am unable to find the correct reference in any of the css. I have looked in the common files--> modules--> flyouts--> main.css and could not find anything that worked by changing the z-index and overflow. I also looked in the skin I am using: Vivid Dreams Violet-->css-->altskin.css. Can anyone lend a hand? I am feeling a little lost in v4.4.

Thanks,

Jeff

[gatordp]

Originally Posted by cflsystems

It may be the overflow property of the parent containers
url would help to be more specific

Here is my main.css for the Fancy Category module - I still can't get the Category to display on top of the central block. I set all the overflow properties to 'visible'

/*
$Id: main.css,v 1.7 2008/12/02 13:14:12 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*/
/* Layout */
.menu-fancy-categories-list .content {
  overflow: visible;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 6px;
  z-index: 1;
}
.fancycat-icons-scheme ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  list-style: none;
  width: 137px;
}
.fancycat-icons-scheme ul li {
  float: left;
  position: relative;
  width: 100%;
  padding: 2px 0px;
  background: white none;
}
.fancycat-icons-scheme li ul {
  display: none;
  position: absolute;
  top: 4px;
  left: 126px;
  background: white none;
  border: 1px solid #b1c6d7;
  margin: 0px;
  padding: 5px 6px 5px 5px;
}
.fancycat-icons-scheme li:hover,
  .fancycat-icons-scheme li.over
{
  background-color: #e4e7ed;
}
.fancycat-icons-scheme li:hover ul,
  .fancycat-icons-scheme li.over ul
{
  display: block;
  overflow: visible;
  z-index: 1;
}
/* multi-level support */
.fancycat-icons-scheme li:hover ul ul, .fancycat-icons-scheme li.over ul ul,
  .fancycat-icons-scheme li:hover ul ul ul, .fancycat-icons-scheme li.over ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul ul ul ul ul,
  .fancycat-icons-scheme li:hover ul ul ul ul ul ul ul ul ul ul ul, .fancycat-icons-scheme li.over ul ul ul ul ul ul ul ul ul ul ul
{
  display: none;
}
.fancycat-icons-scheme li li:hover ul, .fancycat-icons-scheme li li.over ul,
  .fancycat-icons-scheme li li li:hover ul, .fancycat-icons-scheme li li li.over ul,
  .fancycat-icons-scheme li li li li:hover ul, .fancycat-icons-scheme li li li li.over ul,
  .fancycat-icons-scheme li li li li li:hover ul, .fancycat-icons-scheme li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li li li li li.over ul,
  .fancycat-icons-scheme li li li li li li li li li li li:hover ul, .fancycat-icons-scheme li li li li li li li li li li li.over ul
{
  display: block;
  overflow: visible;
  z-index: 1;
}
/* Visual scheme */
.fancycat-icons-scheme ul li a:link,
  .fancycat-icons-scheme ul li a:visited,
  .fancycat-icons-scheme ul li a:hover,
  .fancycat-icons-scheme ul li a:active
{
  display: block;
  position: relative;
  font-size: 12px;
  color: #330000;
  text-decoration: none;
  line-height: 16px;
  vertical-align: middle;
  background: transparent none;
  padding: 0px 25px 0px 0px;
  overflow: visible;
}
.fancycat-icons-scheme a.icon-link:link,
  .fancycat-icons-scheme a.icon-link:visited,
  .fancycat-icons-scheme a.icon-link:hover,
  .fancycat-icons-scheme a.icon-link:active
{
  padding-left: 26px;
}
.fancycat-icons-scheme a.sub-link:link,
  .fancycat-icons-scheme a.sub-link:visited,
  .fancycat-icons-scheme a.sub-link:hover,
  .fancycat-icons-scheme a.sub-link:active
{
  background: transparent url(tree_subdir_plus.gif) no-repeat 97% 4px;
}
.fancycat-icons-scheme a.empty-link:link,
  .fancycat-icons-scheme a.empty-link:visited,
  .fancycat-icons-scheme a.empty-link:hover,
  .fancycat-icons-scheme a.empty-link:active
{
  color: #a3b1c7;
}
.fancycat-icons-scheme a.nowrap-link:link,
  .fancycat-icons-scheme a.nowrap-link:visited,
  .fancycat-icons-scheme a.nowrap-link:hover,
  .fancycat-icons-scheme a.nowrap-link:active
{
  white-space: nowrap;
}
.fancycat-icons-scheme img {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
}

[gatordp]

I just wanted to bump this to see if anyone could help me fix my CSS (above) so the flyout works properly.

Thanks