CODEWITHSUNDEEP
csscross-browser
alsweet
alsweet

Reputation: 633

large image causes browser scroll

I'm having trouble with a large image on my page, I can't seem to avoid it causing a scroll on certain browsers. So far I can only see it on Safari, but my friend apparently also sees it on Chrome.

All I'm doing, is positioning an image inside its container absolutely, and then moving it right, so that it actually outside of the container and wrapper. The problem is, that it's quite a large image, so in some browsers, you are able to scroll to the right revealing the rest of the image. Here's the code.

<html>
<head>
    <style>
        body{
            background: aqua;
            margin: 0;
            overflow-x: hidden;
        }
        #wrapper{
            background: #fff;
            width: 960px;
            height: 100%;
            margin: 0 auto;
        }
        #content{
            width: 960px;
            height: 500px;
            background: yellow; 
            position: relative;
        }
        #image{
            position: absolute;
            bottom: 0;
            right: -320px;
            z-index: 0;
            width: 1210px;
            height: 468px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="image"></div>
        </div>
    </div>
</body>
</html>

and here's a fiddle that demonstrates it: http://jsfiddle.net/alsweeet/5mqHf/

Adding the overflow-x: hidden to the body style seems to solve the problem in most browsers, but not safari. You will see that I have not added this yet into the fiddle demo, and once you add it, you won't be able to scroll left or right anymore, which is the effect I'm trying to achieve cross browser.

I would sure appreciate some advice on this one. I'm sure there's probably a better way of doing this than absolutely positioning it.

Thanks!

Alsweeet

edit: problem IS occurring on Chrome also, the scroll bar is hidden, but you are still able to scroll sideways. Still works fine in Fire fox though.

edit: here's a screenshot to help explain what I'm trying to achieve without any side scroll. The red box is the box which is causing the side scroll. You can see that the red box is outside of the 960 wrapper.

enter image description here

Upvotes: 0

Views: 3581

Answers (3)

JamieM23
JamieM23

Reputation: 561

overflow-x: is not fully cross browser compatible, try using overflow:hidden;, as long as you don't need to scroll vertical on the element then that will never cause you an issue.

A workaround to have overflow-y on an element and restrict the overflow-x on another element is this fiddle.

http://jsfiddle.net/5mqHf/7/ - Fix for image position

A consideration for this is that if you are going to scroll vertically, when looking at the width of the image element, you need to account for the wdtih of a scrollbar to avoid a horizontal scroll bar, this usually varies between 15px and 30px depending on the browser.

Upvotes: 1

user1130272
user1130272

Reputation:

this is what you are looking for?

DEMO

http://jsfiddle.net/5mqHf/4/

Upvotes: 1

Soarabh
Soarabh

Reputation: 2950

Please have a look. Is it matching your requirements. if no please let me know so I can try something more.

DEMO

http://jsfiddle.net/saorabhkr/FyJ4F/

Upvotes: 0

Related Questions