CSS Category Flyout Behind Images in Search Result

[gems14k]

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/inde...1&keyword=ring


How can I fix this?

Thank You.

[Ajeh]

Put the image on the other side?

[gems14k]

Put the image on the other side?

That would work. :)

But is there any other way?

[kobra]

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.

[gems14k]

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.

[kobra]

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.

[gems14k]

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.

[susale]

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.