CODEWITHSUNDEEP
htmlcssfirefox
TLR
TLR

Reputation: 59

Overflow hidden doesn't work on firefox, but does work in IE and chrome

I am making a webshop. Because every page has different number of products, my sidebar has multiple lengths.

I used this to fix the problem for now:

padding-bottom:     5000px;
margin-bottom:      -5000px;
overflow:           hidden;

In IE and Chrome, this solution works. But I tried it on Firefox the other day.... And there it doesn't work.

I tried overflow-x: hidden and overflow-y: hidden but doesn't work either.

Here is my CSS for my sidebar:

.sidebar {
z-index:            9;
position:           absolute;
top:                25%;
bottom:             0;
left:               0;
width:              15%;
background:         #C6A970;
height:             100%;
padding-bottom:     5000px;
margin-bottom:      -5000px;
overflow:           hidden;
}

Does anyone have the solution for me? Thanx in advance!

Upvotes: 1

Views: 8680

Answers (1)

ocbtec
ocbtec

Reputation: 46

Overflow hidden is not working in every scenario. Often a fixed width is required or a vendor specific prefix is needed, e.g. -moz-overflow:hidden.

Especially Firefox and Android browsers have problems with this solutions and I strongly recommend to try other ways like clip or rect to build fixed sized frames.

http://www.w3schools.com/cssref/pr_pos_clip.asp

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

Upvotes: 2

Related Questions