Question

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

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; }