Overflow:hidden not working as expected in Google Chrome

Question

I'm having a problem with the "overflow: hidden" CSS property.

In Firefox, IE8 and Safari 5 when I apply this property to a div that is used for containing ad banners (like adsense leader boards or flash) at the top of my content there is still some overlap happening in Chrome when the window is resized to be small enough that they collide.

In Firefox and IE8 it works as expected and everything is completely hidden behind the right sidebar. In Chrome the actual content is hidden but it is replaced with a white background that still overlaps and blocks out the sidebar.

I have linked to a screenshot showing what the problem looks like. Is there anything I can do to fix this?!

Screenshot http://tinypic.com/r/259cs95/7

Ponnulakshmi Sivasailam · Accepted Answer · 2012-09-16 11:14:04Z

4

I was facing problems with the below css in chrome. It was not working at all.

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
}

Now, I changed the above CSS as,

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
    position:relative;
}

It works fine for me.

answered Sep 16, 2012 at 11:14

Ponnulakshmi Sivasailam

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ebolyen · Accepted Answer · 2011-01-18 18:18:44Z

0

Likely there is some issue with your css or layout.

You could sidestep the issue by changing the z-index on your sidebar to be greater than the z-index of your ad, this would cause it to render above the add regardless. Make sure you define some value for position.

answered Jan 18, 2011 at 18:18

ebolyen

9662 gold badges10 silver badges25 bronze badges

2 Comments

Stephen Over a year ago

Ok, thanks. I wonder why it is only happening in Chrome. I did try and play around with the z-index but it is possible that I was setting it in the wrong place. Would everything inside the sidebar need to have a higher z-index or just the sidebar div itself?

danjah Over a year ago

Man, this is weird - I have the same issue while creating an Accordion horizontal menu with YUI2.9 animation. Overflow:hidden; in Chrome is hiding the content but the dimensions of the content holder are exactly the width of the content that is hidden :/

Collectives™ on Stack Overflow

Overflow:hidden not working as expected in Google Chrome

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related