'Overflow hidden doesn't work on firefox

Yesterday i check that one highlights products slide that i have in the home of one webpage is not property vertical aligned only on firefox, it works fine on IE and Chrome.

I was searching info and i find a lot of many years ago bugs on FF. I try a few solutions i find but no one works.

<div id="feature-wrap-container">
    <div id="feature_wrap">
        <div id="scrollable">
           //a list of element floating left
        </div>
    </div>
</div>

#feature-wrap-container{
 background-color: #ffffff;
 width: 100%;
 height: 260px;
}

#feature_wrap {
 width: 960px;
 height: 260px;
 overflow:hidden;
 position: relative;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
}

#scrollable {
 height:100%;
}

On chrome and IE the div is center on the window and in firefox the feature_wrap align to right and make the window bigger than the 100%.

The slide is based on: http://wordpress.org/extend/plugins/featured-posts-slideshow/, but obviously modified.

Thanks in advance.

csswordpressfirefoxoverflow


Solution 1:[1]

See I have created a fiddle of yours here, and it looks good for me in firefox. I have reduced the width of the #feature_wrap and checked in firefox, and it is working. What is the issue are you facing?

Screenshot

Get the full image here.

Solution 2:[2]

Instead of using overflow: hidden it's better to use overflow-x: hidden, overflow-y: hidden as below:

#feature_wrap {
 width: 960px;
 height: 260px;
 overflow-x :hidden;
 overflow-y: hidden;
 position: relative;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Praveen Kumar Purushothaman
Solution 2 Suraj Shrestha

Related Questions