CODEWITHSUNDEEP
cssgoogle-chromeoverflowhidden
Stephen
Stephen

Reputation: 31

Overflow:hidden not working as expected in Google Chrome

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

Upvotes: 3

Views: 7086

Answers (2)

Ponnulakshmi Sivasailam
Ponnulakshmi Sivasailam

Reputation: 41

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.

Upvotes: 4

ebolyen
ebolyen

Reputation: 966

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.

Upvotes: 0

Related Questions