Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to move the subcategory flyout menu (z-index problem?)

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 03-04-2011, 08:32 PM
 
FineDesign FineDesign is offline
 

Member
  
Join Date: Dec 2010
Posts: 28
 

Default How to move the subcategory flyout menu (z-index problem?)

One of the categories on my leftbar cat menu has about 20 subcats. Unfortunately, 20 subcats run the flyout menu for that category off the bottom of the page.

I▓m attempting to change the starting position of the <ul> for the flyout subcat menu (I want to move it up so it doesn▓t run off the page). I▓ve been able to move the flyout subcat menu up, but for some reason a) I▓m losing the first 3-4 subcat menu items (they don▓t show at the top), and b) the <ul> for the FIRST cat menu item lays on top of my flyout subcat menu.

My first thought was, okay, it sounds like a z-index problem. I▓ve dug into the templates, found where I think the <ul> and <li>▓s for the flyout subcat menu is being created (in fancy_subcategories.tpl), but here▓s ⌠the rub■ - when I analyze and step through the code, it appears that fancy_subcategories.tpl is never executed (it doesn▓t show in the Debugging Console template list either). The only thing I see that might be creating the <ul><li> flyout subcat menu is the following statement in fancy_categories.tpl:

if {$fancy_use_cache} {fancycat_get_cache}

I checked, and $fancy_use_cache has a value of 1, which means fancycat_get_cache (which I▓m assuming is an X-Cart defined function) IS executed. Where is this function defined? How do I change it to give higher z-index values to the <li>▓s on my flyout subcat menu?

I▓ve thought about making the font sizes smaller, and decreasing the padding to try and make the flyout subcat menu ⌠fit■ on the page, but my client wants to cater to people with less than perfect eyesight, so that▓s not an option. Going to a horizontal menu won▓t ⌠buy■ me quite enough room either.

Any knowledge of how this works is greatly appreciated.


I'm running X-Cart Pro, v4.4.2.


Thanks!
__________________
4.4.1
Reply With Quote
  #2  
Old 03-08-2011, 09:42 AM
 
FineDesign FineDesign is offline
 

Member
  
Join Date: Dec 2010
Posts: 28
 

Default Re: How to move the subcategory flyout menu (z-index problem?)

Here's an update...

I don't think this is a z-index problem. If I assign a z-index of -20000 to #header (and my flyout has a z-index of 20000) the flyout is still truncated at the top (right at the bottom of the #header div). I've applied overflow: visible; !important and still the top of the flyout is truncated.

I realize that #header is at the bottom of the HTML code for the page (positioned with absolute), and somehow I'm wondering if this isn't somehow causing the problem.

Has anyone else had any issues with this? Again, all I'm trying to do is move the flyout menu up on the page about 100px. Here's the CSS I'm changing to try to do that:

.fancycat-icons-e li ul { /* Change flyout menu postion here */
display: none;
position: absolute;
/* top: 4px; Custom */
top: -100px;
/* left: 160px; */
left: 160px;
/* background: #E0E6F1; Custom */
background: #D4E3E0;
border: 1px solid #fff;
margin: 0;
padding: 0;
overflow: visible; !important
z-index: 20000; !important
}
__________________
4.4.1
Reply With Quote
  #3  
Old 03-08-2011, 11:21 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 14,190
 

Default Re: How to move the subcategory flyout menu (z-index problem?)

Look at it with FF/Firebug - you will need to change margins/paddings for the header and middle part of the store. If you want to change position of the menu this has nothing to do with z-index
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
  #4  
Old 03-08-2011, 01:09 PM
  cherie's Avatar 
cherie cherie is offline
 

X-Wizard
  
Join Date: May 2003
Location: USA
Posts: 1,534
 

Default Re: How to move the subcategory flyout menu (z-index problem?)

The "!important" tags above are incorrect. They should be before the semicolon ( ; ).

I don't recommend using them if you can help it.
__________________
redlimeweb.com
custom mods and design integration
4.7 linux
Reply With Quote
  #5  
Old 03-09-2011, 01:12 PM
 
FineDesign FineDesign is offline
 

Member
  
Join Date: Dec 2010
Posts: 28
 

Default Re: How to move the subcategory flyout menu (z-index problem?)

Thank you cflsystems and cherie for your responses.

cherie - thanks for pointing that out to me. Yes, I rarely use !important, but sometimes when you're modifying someone else's code, it's a necessary work around. Unfortunately, after correcting all my !importants the problem still exists.

cflsystems - if I start changing the padding and margins on the header and main content areas, I will affect the way those areas look - something I don't want to do.

Today I found something that supports my "overflow problem" theory. In the CSS for the outer container div (#content-container), there is an overflow: hidden;. If I remove that overflow, my flyout menu appears the way it should (NOT truncated at the top where the bottom of the header is), however, with that overflow removed, I get some nasty unwanted overflow beneath the page footer for the length of a whole page (which is most likely why the overflow: hidden; is there). If I move the overflow: hidden; down to the next inner container level (#content-container2), then my flyout menu is truncated.

Keep in mind I▓m supposedly overriding this overflow: hidden; much further down the CSS cascade with the CSS from my original post (now with corrected !important). I know I▓m targeting the <ul> with this CSS because I can change the width and see a change on the page, I can also move the starting position of the flyout menu, no problem. So, it seems as if the CSS cascade is not working the way it normally does (lower level declarations override higher level).

Here▓s the container CSS:

#content-container{clear:both;
width:100%;
float:left;
padding-bottom:0
;margin-top:183px;
overflow:hidden;
position:relative;
background:url(../images/left_bg.gif) repeat-y left;}
#content-container2{float:left;
width:200%;
position:relative
;right:100%;}

Any ideas?
__________________
4.4.1
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 02:24 PM.

   

 
X-Cart forums © 2001-2020