IE showing only 1 background image div inside div

Here is the issue I have:

I'm trying to make the layout as in the the picture:

Of course I would prefer a div only version, but my a开发者_如何学运维ffords so far have gone in vain. I have come up with a combination of tables and divs to make it work in Firefox, but in IE8 (possibly other IE versions) it is not showing the background images 2 and 4.

Any ideas on how to make this work in IE as well?

PS: No time to wait for CSS3 and I have tried quirks mode and the background is showing, but many other issues immerse then. I would prefer to keep the 'transitional' mode.

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;
}

If i understand correctly, you want the main text and the two images near that, to have a fixed width, and the two gradients must fill out the rest. Than this might be helpfull: http://jsfiddle.net/zxRf3/5/

It looks as though the reason the left and right images are not displaying is because the nested table.bg sitting inside td.left and td.right does not have an actual height. I know you have set the height to 100% but without actual content the nested table has no reason to expand.

By assigning a height:100% to #middletable td.left and #middletable td.right the nested table can now achieve the height of 100% set to it. You can see in this jsfiddle: http://jsfiddle.net/CndUR/7/ the images are now displaying.

I would recommend looking into building your layout using CSS since what you are displaying is not tabular data (or doesn't seem to be).

A great article for multi-column liquid layouts (although old - still very good) is http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts by Matthew Taylor.