IE показывает только 1 фоновое изображение div внутри div

Question

Вот проблема, которая у меня есть:

Я пытаюсь сделать макет как на картинке:

Конечно, я бы предпочел версию только для div, но мои возможности до сих пор были напрасны. Я придумал комбинацию таблиц и div, чтобы он работал в Firefox, но в IE8 (возможно, в других версиях IE) он не показывает фоновые изображения 2 и 4.

Есть идеи, как заставить это работать и в IE?

PS: Нет времени ждать CSS3, и я попробовал режим причуд, и фон показывает, но многие другие проблемы погружают в себя. Я бы предпочел сохранить «переходный» режим.

HTML:

<table id="middletable" class="bg">
<tr><td class="left" width="*">
    <table class="bg">
        <tr><td id="leftimg">&nbsp;</td></tr>
    </table>
</td>
<td width="84">
    <div class="middle">
        CONTENT
    </div>
</td>
<td class="right" width="*">
    <table class="bg">
        <tr><td id="rightimg">&nbsp;</td></tr>
    </table>
</td></tr>
</table>

CSS:

table.bg {
width: 100%;
height: 100%;
border-collapse:collapse;
}

#middletable {
background: #fff;
}

#middletable td.left {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-left-rx.jpg') repeat-x top #ff0000;
text-align: right;
vertical-align: top;
}

#middletable td.right {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-right-rx.jpg') repeat-x top #ff0;
text-align: left;
vertical-align: top;
}

#leftimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-left-nr.jpg') no-repeat top right #ccc;
}
#rightimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-right-nr.jpg') no-repeat top left #000;
}

Answer 1

Похоже, что причина, по которой левые и правые изображения не отображаются, заключается в том, что вложенные table.bg, расположенные внутри td.left и td.right, не имеют фактической высоты.Я знаю, что вы установили высоту 100%, но без фактического содержимого вложенная таблица не имеет смысла расширяться.

При назначении height:100% #middletable td.left и #middletable td.right вложенная таблица теперь может достигатьвысота 100% установлена ​​на него.Вы можете увидеть в этом jsfiddle: http://jsfiddle.net/CndUR/7/ изображения теперь отображаются.

Я бы порекомендовал изучить создание вашего макета с помощью CSS, поскольку то, что вы отображаете, не является табличными данными (или не кажетсябыть).

Отличная статья для многоколоночных схем размещения жидкостей (хотя старая - все еще очень хорошая) - http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts от Мэтью Тейлора.

Answer 2

Если я правильно понимаю, вы хотите, чтобы основной текст и два изображения рядом с ним имели фиксированную ширину, а два градиента должны заполнять остальные. Чем это может быть полезно: http://jsfiddle.net/zxRf3/5/