Фоновое изображение не отображается в IE6 и IE7

Question

У меня есть 3 деления HTML MARKUP

<div class="top-content-wrapper"></div>
<div id="content-wrapper">
</div>
<div class="bottom-content-wrapper">
</div>

Прикладной CSS на

.top-content-wrapper {
background:url("img/white-box-top-bg.gif") no-repeat scroll left top transparent;
height:10px;
margin:0 auto;
padding:0 30px;
width:686px;
}
#content-wrapper {
background:url("img/white-box-middle-bg.gif") repeat-y scroll left top transparent;
margin:0 auto;
padding:10px 25px 70px;
width:696px;
}
.bottom-content-wrapper  {
background:url("img/white-box-bottom-bg.gif") no-repeat scroll left top transparent;
height:53px;
margin:0 auto;
padding:0 30px;
width:686px;
}

Во всех основных браузерах работает нормально, но в IE6 и iE7 фон не отображается, пожалуйста, помогите мне. Спасибо.

Answer 1

Не уверен, но может быть, что у вас неправильный порядок параметров для фонов. Правильный способ их сортировки:

background: transparent url("img/white-box-middle-bg.gif") repeat-y scroll left top;

Кроме того, как сказал Sam152 в комментариях, возможно, у вас нет контента в ваших элементах div, поэтому они вообще не будут отображаться в некоторых браузерах.

Answer 2

Некоторым браузерам (в общем, IE) не нравится, когда у вас есть пустые div или div только с пробелами в них. Обычно лучше ввести символ неразрывный пробел ( ), чтобы убедиться, что браузер действительно считает, что его стоит отобразить.