100% width not working so well in IE

[bradyj]

I was playing around with my companies site here (http://www.dotfive.com/bad/index.html) to see if I can make a 100% width box to repeat the image on the background.

In NN and all the others, it views it fine -- IE shows a little black bar on the right side, and when you resize smaller, it gives me a horizontal scrollbar (bigger than 800*600).

Any ideas?

[Frank]

Here is an idea

<style type="text/css">
body
{
background-image:
url("sample.jpg");
background-repeat: repeat-y
}
</style>

Use repeat-x to get the image to go left to right across the screen

Hope that helps

[bradyj]

No, I did that -- I actually have that exact code in there!! The problem seems to be with the CSS box set to 100% width... it works in every other browser but IE (where IE shows a black right size and then gives me scrollbars everytime you resize).:confused:

[sage45]

.images {
background-attachment: scroll; <-- Why this line???
background-color: #FFFFFF;
background-image: url(images/bartlogo.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
color: #333333;
position: absolute;
height: 227px;
width: 100%; <-- use the pixel count of the image width
left: 0px;
top: 0px;
margin: 0%;
padding: 0%;
}

-sage-

[bradyj]

Sage--
this line:
background-attachment: scroll;
would be an accident:o sorry

However, I understand to make the width pixels as it is in the final site (http://www.belairediplays.com) -- but I want to be able to have one standard background for the body, and one background for that image box. If I make the image box 100% width it will always fill the background of the window size with the repeated image. If I do 830px (which is it's dimension), you'll just see the background as set up with the plain black for the body. I don't want a seperate background for each page, just a seperate image box for each page. It's easier to change on the fly in the long run... did that make sense?

[sage45]

Makes sense... But by specifying the height, you force the width (unless specified by way of pixels) to constrain to the image's dimensions... In other words, by saying width 100%, you are saying constrain my image to it's 100% width as compared to the height...

-sage-

[bradyj]

Hmmm, thank you. That's good CSS to know. Is there anyway then to create a layer that I can make a dimension and then pop a background in? Like a box 227px in height that fills 100% of the width, with just a repeated background?

[cssangel]

try making the box (.images?) display: block then give it the height, in pixels

then it should automatically fill to 100% width: make sure no padding, margin, border


.images {
background-color: #ffffff;
background-image: url(images/bartlogo.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
color: #333333;
display: block;
height: 227px;
margin: 0%;
padding: 0%;
}

then HTML:
<div class="images"></div>
will make the box..

ca