Jump to content
Stef's Coding Community
Rob in hood

A way to prevent overflowing image from triggering scrollbars

Recommended Posts

You can give the container overflow hidden.

 

Or, even if you AP the image that would still probably trigger the scrollbar. However, if you position fixed it, it would not (probabably).

Share this post


Link to post
Share on other sites

I actually want the image to overflow the div. I want the overflow to get cut off by the browser window, instead of making scrollbars to show the rest of the image.

 

The reason for this approach is so that the browser cuts off equally from both sides of the border for smaller screen resolutions. If I used fixed width border divs, then for small screen resolutions the border divs will make the browser have horizontal scrollbars.

 

The alternate I know to this way is to make a big background image with both border pictures, and a big blank area in the middle, and set that image as the background image. But this makes the image unnecessarily large, just for the big blank area in the middle, seperating the border images.

 

Position:fixed did stop it from making scrollbars, but I want the image to scroll, not be fixed :)

Edited by Rob in hood

Share this post


Link to post
Share on other sites

I realised I should maybe post the CSS code.

 

@charset "UTF-8";
/* CSS Document */
body {
 background: #1b1b1b url(images/bodytile.png) center repeat-y;
 margin: 0px;
 padding: 0px;
}
#container {
 width: 1010px;
 margin: 0 auto;
}
#header {
 background: #1b1b1b url(images/headertile.png) top repeat-x;
 height: 167px;
}
#leftcol {
 background: #1b1b1b url(images/bgleft.png) top right no-repeat;
 float: left;
 width: 5px;
 height: 500px;
}
#rightcol {
 background: #1b1b1b url(images/bgright.png) top left no-repeat;
 float: right;
 width: 5px;
 height: 500px;
}
#content {
 background: #e9e9e9;
 float: left;
 width: 1000px;
 height: 1200px;
}
#footer {
 background: #1b1b1b url(images/footer.png) bottom center no-repeat;
 clear: both;
 height: 97px;
}

Share this post


Link to post
Share on other sites
body overflow-x: hidden should do what you want in all but opera I think.

Sweet, thanks Eric! You're a legend! You deserve some deliciously brewed coffee. :cool:

 

Is there a better way to achieve this that is more compatible? Apart from that big background image method.

Share this post


Link to post
Share on other sites

Your welcome. Double check that Opera isn't defaulting to just body overflow hidden (without the X). As that would hide any vertical scroll. Actually, in order to fix that little issue, say overflow-x hidden and overflow-y auto in that order. As long as Opera is still happy, that's probably going to be the easiest fix. There is also some opera only js you can track down. But that's not a clean fix.

 

No scrollbar and doing what you want is not a very easy task. There was a quiz not to long ago here... http://www.sitepoint.com/forums/showthread.php?t=618512 on this very same problem. (AKA quiz #1 in that link). Navigate to page #2 and you'll see a couple alternative fixes. As you will tell, it's a little more involved.

Edited by Eric

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...