X-Cart forums - Fancy_Cat menu flying out under central block

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Fancy_Cat menu flying out under central block (https://forum.x-cart.com/showthread.php?t=51404)

Fancy_Cat menu flying out under central block

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?

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

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

Code:

 .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.
8)

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

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

Re: Fancy_Cat menu flying out under central block

Quote:

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'

Code:

/*

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

}

Re: Fancy_Cat menu flying out under central block

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

Thanks

Re: Fancy_Cat menu flying out under central block

I wanted to try again and see if anyone can look at my Fancy Category .css posted above. The flyouts still show up behind the central block in all browsers.

Re: Fancy_Cat menu flying out under central block

Quote:

Originally Posted by gatordp

I wanted to try again and see if anyone can look at my Fancy Category .css posted above. The flyouts still show up behind the central block in all browsers.

I've got the same issue, did you ever find a fix?

Re: Fancy_Cat menu flying out under central block

Nope, never found a solution.