Проблема с фоновым отображением IE

Question

Я создаю веб-сайт для своей церкви, и у меня возникают проблемы с его правильным отображением в IE.Кажется, что у моего div "sidebox" фоновая позиция переопределена "margin:0 auto; ", поскольку фон отображается по центру, а не справа, что приводит к смещению сайта вправо.

Вот код:

.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>

Ниже приведена ссылка на запущенный сайт.Вы можете видеть, что он нормально работает в FF и Safari, но не в IE.Мой приведенный выше код не содержит содержимого, и его удаление не устраняет проблему.Бегущая страница

Answer 1

Глядя на это через панель инструментов разработчика IE, это дает .sidebox выравнивание по центру.Изменение этого значения на левое, кажется, исправляет это.

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

Answer 2

Я бы использовал совершенно другой подход к тому, как вы измельчаете фоновое изображение.

1. Создайте верхнее и нижнее изображение тени со скругленными углами.Используйте их в качестве фона для верха и низа (как будто это еще не было очевидно).
2. Создайте "длинное" изображение высотой 1 пиксель для тени с обеих сторон.Используйте это для оформления фона всей области содержимого страницы.
3. Старайтесь не использовать абсолютное позиционирование.Такой же макет можно было бы создать с помощью поплавков.Например:

.контейнер { ширина:960 пикселей;маржа:0 авто;}

.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'>

Контент можно найти здесь...используйте значения с плавающей точкой для создания столбцов вместо абсолютного позиционирования.

  </div>

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

</div>