absolute position is adding scroll bar

Ultragames

12-13-2007, 06:52 AM

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:
<!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:
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 */
}

abduraooft

12-13-2007, 07:06 AM

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.

Ultragames

12-13-2007, 07:29 AM

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?

abduraooft

12-13-2007, 07:35 AM

Try by adding overflow-x:hidden; to body

Ultragames

12-13-2007, 07:41 AM

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?

coothead

12-13-2007, 09:51 AM

Hi there Ultragames,

to get overflow-x working in IE use...

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