Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts

    absolute position is adding scroll bar

    I have two objects positioned absolutely. They are both set to 50% left, but on uses a negative left margin to put it to the left of my container, and one uses a negative right margin to position it to the right of my container. Both are set to a z-index of 0.

    Good: The one on the left does not affect the scroll bar, and is hidden in smaller windows.

    Bad: The one on the right does affect the scroll bar, and is not hidden in smaller windows. I want both of the images to be hidden if the window is too small.


    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<link href="./css/style.css" media="screen" rel="stylesheet" type="text/css" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>WIP</title>
    </head>
    
    <body>
    <div class="container">
    	Hello!
    </div>
    
    <img src="images/layout/bg_left.jpg" border="0" class="bg_left" />
    <img src="images/layout/bg_right.jpg" border="0" class="bg_right" />
    </body>
    </html>

    CSS:
    Code:
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    }
    
    .container {
    	width: 976px;
    	margin: 0px auto;
    }
    
    .bg_left {
    	width: 142px;
    	height: 576px;
    	z-index: 0;
    	position: absolute;
    	top: 312px;	left: 50%;
    	margin-left: -630px;	/* 1/2 container width + img width */
    }
    
    .bg_right {
    	width: 142px;
    	height: 576px;
    	z-index: 0;
    	position: absolute;
    	top: 312px;	right: 50%;
    	margin-right: -630px;	/* 1/2 container width + img width */
    }
    If I'm postin here, I NEED YOUR HELP!!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I don't think you are doing it inthe right way. To check this, put some border around the container and body(in different color) to see where they actually recides.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Thanks for the input, but it does not seem that you are correct, unless I do not understand what you said. I placed a border of different colors on the container as well as the body, and as expected, the container is 976px wide, and the box takes up only the width of the window. Both images fall outside the body as they should, but for some reason the right one is still creating a scroll bar.

    Anyone?
    If I'm postin here, I NEED YOUR HELP!!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try by adding overflow-x:hidden; to body
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Thank youfor your suggestion. I have already tried that, and while it works well in Firefox, it does not in IE.

    Is there any known reason why an object outside the body would create a scroll bar on one side of the body and not another?
    If I'm postin here, I NEED YOUR HELP!!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Ultragames,

    to get overflow-x working in IE use...
    Code:
    
    html,body {
    	margin:0;
    	padding:0;
            overflow-x:hidden;
    }
    
    Opera, at present, does not recognize overflow-x but as it is in the CSS 3 draft, it may well be adopted in the near future.

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •