Question

My issue can be seen here: http://jasonnarciso.com/dev/cmwd/concrete-solutions/

Basically I have a very simple jquery script in place that shows a div when the .item element is hovered. Works fine, but on the left and bottom containers, the div gets cut off.

Obviously this is a z-index issue, but I’m wondering if I should be setting the z-index with jquery? Or is there another way to force it to the highest index? I’ve tried playing with different values on containers and nothing seems to be working.

Any help is greatly appreciated.

Answer 1

Ok, I see the problem now.

I think that there are two problems, a coding issue and a design issue.

Let’s start from the design. the #product-boxes container has a width, and you shouldn’t show something that it’s outside that width. It’s true that if you delete the hidden overflow you’ll solve the right boxes clip issue, but it’s not perfect because the hover effect will cause an horizontal scrolling bar.

About the bottom boxes, they’ll be always clipped, even without the hidden overflow, simply because the container hasn’t enough height to show the hovering box. Even in this case, without the hidden overflow, you’ll cause a vertical scrolling bar.

About the coding, you should drop the clearfix in that way, just do this, after your floated elements:

<br class="clear" />

and in your CSS:

.clear {display: block; clear: both; height: 0px;}

Then, to solve the bottom cut, you have to modify the #product-bozes css to:

#product-boxes {
    /* REMOVED overflow: hidden; */
    padding: 35px 0px 200px 52px;
}

The extra padding will give to the container enough space to show the overlays. I tested it in Firebug, and it’s working fine.