IE проблема с отображением фона - PullRequest
Новая
       19

IE проблема с отображением фона

1 голос
/ 03 января 2009

Я создаю веб-сайт для своей церкви, и у меня возникают проблемы с его отображением прямо в 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. Мой код выше без содержания, и удаление его не решает проблему. Рабочая страница

Ответы [ 2 ]

2 голосов
/ 03 января 2009

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

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

.container {ширина: 960px; поле: 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>
1 голос
/ 03 января 2009

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

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