CSS Category Flyout Behind Images in Search Result

I'm using the CSS Flyout Menu from DrByte. The flyout is behind the images of the product.

Here is my test page:

http://www.nokoria.com/shopping/index.php?main_page=advanced_search_result&search_in_description=1&keyword=ring

How can I fix this?

Thank You.

Put the image on the other side? :smile:

Ajeh:

Put the image on the other side? :smile:

That would work. :)

But is there any other way?

You are using the combination 'classic' template with 2 stylesheets for basic styling. You should seriously consider converting to a template based uopn the template_default fileset. You can search here for 'template default' for the many posts about why this is recommended.

if you find your "stylesheet_categories_menu.css" and then locate the code below:

}
div#nav-cat li li {
  margin: 0; /* this overrides the margin-top in the declaration above */
  z-index: 1000;
``` add the line highlighted in red and this will bring the flyouts to the front.  They are still not distinct as it looks as though you do not have a color assigned to the actual box.

Or the image is taking precedence and if you find the css for these images in one or both of the stylesheets you can add a  z-index: -1;  statement to place it behind others that have a higher order. This might include a TD tag with your stylesheets.

Easier witht the template_default JMO as thee are currently a combination of css items with table items.

kobra,

I added the z-index to "div#nav-cat li li" and "div#nav-cat ul.level2"

It fixed the problem on Firefox, but not on IE. (I hate IE)

Thank you.

I looked at your problem in a bit more depth, as in other pages besides the search page. All pages that I loked at function correctly and as you know it is only the search page that exhibits the glitch.

This is a problem created from using stylesheet_original and stylesheet_new or the combination template.(see my orig post about this)

If you have FireFox and the web dev tools look at your product display page and use the outline table cells. You will notice that the image is not an individual cell.

Now look at your search page and outline the table cells. You will notice that the image is contained in a table cell.

It is this that is causing the flyout to appear behind the image. While I am sure it is correctable, it is much advised to not use this combo template one for these reasons and two for future ease of maintaining compatibility.

Easier to change now than later.

kobra,

I'm using 1.3.0.2.

I'm not sure why I have a combo template.

How can I use only a one template? Do I simply combine the stylesheet?

Thank you for looking into my problem.

Hi kobra,

I have the same problem. How do I merge into 1 template or fix these problems. I did added the z-index: 1000 but the other pages are still being blocked by the product images and IE is not effective.

Search here for the term 'template default' and there are many posts about this...if you have not applied too much styling to your site you might find it easier to download a template based on the template default files in the download sectionin the top nav bar. Follow the install instructions and you will be on the right track

I just did merge the template default files to my own template folders but IE is still showing the menu behind the images.

Depending on the site, I have found adding any of these caused IE to behave more cooperatively:

div#nav-head li:hover {z-index: 2;}

div#nav-cat li {
   z-index: 1;
  }

div#nav-head ul {
  z-index:1;
}

If you merged the table based stuff with the new tabless version this is not what anyone wants. To determine this check to see how mant TD;s you have...more than about 5 and this is the result of the tabled css with the new.

If this is what you are meaning by 'merge'

Thanks kobra & DrByte,

It's working now by adding "z-index: 1;". At first it didn't work because I forgot to delete the li because the original css has double li so I deleted on of them.

However; there's another problem with IE. I got too many subcategories and it is not allowing me to scroll my submenu all the way down to the end. I can't be able to view furthermore, only to the end of my last wording on the page.

I tried viewing it on FIREBOX and the submenu/subcategories are working fine. I can view all my submenus/subcategories.

Any idea what's causing this? thanks.