Question

I have horizontal scroll on a wordpress site which works in chrome on all computer but not in some computers on safari and firefox.

My code is:

html {
    height:100%;
    overflow-x:hidden;

}
body {
    width:3080px;
    overflow-y:hidden;
}

when i remove overflow-x:hidden; the horizontal scroll works but you can see the scrollbar.
here is a link to the site http://happybirthday.irinanisimova.com/photography/

How can I hide the scrollbar? Also do you know why this works on some computers in safari and firefox but not all?

Thanks!

Answer 1

When I want to change the default scroll bar I usually create a container div then set the overflow that I want on that rather then on the body. Try switching your overflow to a container div with a width and height of 100% and remove the width and overflow on the body tag.

http://jsfiddle.net/7kd8V/21/

html {
overflow:hidden;
}
#container {
width:100%;
overflow:auto;
white-space: nowrap;
}
img {
display:inline-block;
}

    <div id="container">
        put images in here
    </div>