Quick overflow/scrollbar issue

overflow not behaving as expected

[nuclearsugar]

I've been crunching my head over this issue and simply need some guidance. I have googled every possible keyword I can think of.

I'm calling an image to be absolutely positioned and half of the image is outside of the browser viewport. I need this image to not call a page scrollbar, so I declared the overflow: hidden; BUT it does not work. It seems like a simple issue but I'm stuck. Thanks!

div.background_corner {
height: 36px;
width: 60px;
position:absolute;
top: 78px;
left: 992px;
background-image: url(theme/background_corner.jpg);
overflow:hidden;
z-index:10;
}

[swa66]

Welcome to webmasterworld!

Why don't you make the width of the div small enough not to stick out of the viewport ?

overflow:hidden is only going to hide what's inside the div that's too large to fit it's size. (background won't do outside)

[nuclearsugar]

I'm making the website viewable at different resolutions (with an added style at larger resolutions)

I can't make the div any smaller because its the exact size it needs to be already.

I did a test by adding 'overflow: hidden' to the css body tag, and this achieved the type of results I am looking for. Except I still need the scrollbars to appear when the resolution gets too small.

Any suggestions of how to use divs that knowingly will be outside of the viewport and make the scrolls not appear for this certain element?

[nuclearsugar]

ahh answer found! Tricky but understandable workaround. Now I know!
Thanks for your help.

overflow:hidden will apply ONLY to the element NOT the body, so if the element overflows the viewport it will create a scroll bar.

"size and position the container so it stays within the viewport and use the background-position properties to push the image "out" of the container"

[edited by: SuzyUK at 8:24 am (utc) on Oct. 6, 2008]
[edit reason] Please No URI's [/edit]