IE background display problem

Question

Hello,

I'm creating a website for my church and I'm having problems making it display right in IE. It seems that my div "sidebox" is having its background position overridden by the "margin: 0 auto;" as the background displays centered rather than on the right, which is shifting the site to the right.

Here's the code:

.sidebox {
margin: 0 auto;
background-image: url(images/bg-container-right.jpg);
background-repeat: no-repeat;
background-position: bottom right !important;
position: absolute;
left: 0px;
width: 960px;

}

.boxhead {
    background-image: url(images/bg-container-top.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    height: 37px;
}

.boxbody {
    background-image: url(images/bg-container-left.jpg);
    background-repeat: no-repeat;
    background-position: bottom left !important;
    width: 25px !important;
}

.boxtopcorner {
    background-image: url(images/bg-container-top-right.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 25px;
    height: 37px;
}

<div class='sidebox' style='border: 1px solid;'>
I'm in the box
 <div class='boxhead'>
  <div class='boxtopcorner'></div>
 </div>
 <div class='boxbody' style='height: 750px;'>
  <!-- Content Goes Here -->
 </div>
</div>

Below is a link to the running site. You can see it run fine in FF and Safari, but not in IE. My code above is without the content and removing it doesn't fix the problem. Running page

Answer 1

I would take an entirely different approach to how you chopped up the background image.

1. Create a top and bottom image for the shadow with rounded corners. Use these as backgrounds for the top and bottom (as if that wasn't obvious already).
2. Create a 'long' 1px high image for the shadow on both sides. Use this for the background of the entire content area for the page.
3. Try not to use absolute positioning. The same layout could be created using floats. For example:

.container { width: 960px; margin: 0 auto; }

.header { width: 960px; height: 20px; background: url(top.jpg) no-repeat; }

.footer { width: 960px; height: 20px; background: url(bottom.jpg) no-repeat; }

.body { width: 960px; background: url(body.jpg) repeat-y; }

<div class='container'>

  <div class='header'>&nbsp;</div>

  <div class='body'>

Content goes here... use floats to create columns instead of absolute positioning.

  </div>

  <div class='footer'>&nbsp;</div>

</div>

Answer 2

Looking at it through IE developer toolbar, it gives .sidebox an alignment of center. Changing that to left seems to fix it.

.sidebox {
  ...
  text-align: left;
}