IE 7 отображает проблему с 2 обертками

Question

У меня есть 2 обертки, одна внутри другой, в соответствии с HTML ниже.Первая обертка содержит плитку, которая прокручивается вниз.Оболочка 2 имеет изображение 940 X295px.Прекрасно работает в IE5 и IE8, но в IE7 нижний колонтитул переходит к wrapper2, а текст расширяется вниз, снизу и ниже.

Это мой HTML:

<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>

Я переместилзакрытие div везде безуспешно.

Мои css для перечисленных выше div:

body {
 margin-top: 0px;
 padding-top: 0px;
 background-image: url(../images/body_vert_tile.gif);
 background-color: #C8BE86;
 background-repeat: repeat-x;
}
#wrapper {
 background-attachment: scroll;
 background-image: url(../images/wrapper_horiz_tile.gif);
 background-repeat: repeat-y;
 margin-right: auto;
 margin-left: auto;
 width: 940px;
}
#wrapper2 {
 background-image: url(../images/wrapper_2.jpg);
 height: 295px;
 margin-right: auto;
 margin-left: auto;
 background-position: left top;
}
#header {
 width: 940px;
 background-image: url(../images/header.jpg);
 height: 345px;
 margin-right: auto;
 margin-left: auto;
}
#maincontent {
 float: right;
 width: 630px;
 padding-right: 70px;
 padding-left: 10px;
 margin-top: -10px;
}
#maincontent_home {
 float: right;
 width: 420px;
 padding-right: 10px;
 padding-left: 10px;
 margin-top: -10px;
}
#secondary_content {
 float: right;
 width: 190px;
 padding-right: 70px;
 margin-top: 30px;
 padding-left: 20px;
}
#footer {
 background-repeat: no-repeat;
 background-position: left bottom;
 width: 940px;
 text-align: center;
 clear: right;
 background-image: url(../images/footer.jpg);
 height: 145px;
 margin-right: auto;
 margin-left: auto;
#navigation {
 float: right;
 width: 130px;
 padding-right: 10px;
 padding-bottom: 10px;
 background-repeat: repeat-y;
 background-position: right top;
 padding-top: 5px;
}

Я вырываю свои волосы.Должен ли я просто игнорировать IE7?Я действительно хотел бы преодолеть это.Единственный способ обойти это, я нашел обертку 2, сидящую под заголовком и закрывающуюся перед основным контентом.Затем я устанавливаю -ve поля в верхней части содержимого и выбираю тот же размер, что и высота изображения в wrapper2.Это сработало, но я не знаю, стоит ли мне делать подобные вещи.

Ваша помощь будет принята с благодарностью.

Answer 1

Алехандро предложил удалить высоту Wrapper 2 и добавить: background repeat: no repeat;

Когда я это сделал, изображение исчезло, но когда я изменил свойство высоты на min: height: 295px;это работало прекрасно.Спасибо, Алехандро, что указал мне правильное направление

Answer 2

Было бы здорово, если бы вы могли предоставить URL для проверки этого поведения, но я бы добавил:

<div style="clear:both;">&nbsp;</div>

после закрытия навигации DIV

Кстати, я вашВы не должны использовать сброс CSS, вы должны.Я использую план, но их много.