IE8 Standards Mode - weird behavior of table columns - glitchy TD width - html

Question

The problem itself is only visible in IE8 Standards Mode (I'm using IE8/WinXP VM on VMWare Player), it looks normal in IE9+ and other browsers. Here's how it looks in IE8:
And this is how it SHOULD look:
Here's the code (without the background images, but they don't change anything): http://jsfiddle.net/pe6esnuw/6/
<table class="msgTable" cellspacing="0" cellpadding="0">
<tr>
<td class="msgTableTL"></td>
<td class="msgTableT" colspan="2"></td>
<td class="msgTableTR"></td>
</tr>
<tr>
<td class="msgTableL"></td>
<td class="msgTableContent" colspan="2">Content goes here blabla</td>
<td class="msgTableR"></td>
</tr>
<tr>
<td class="msgTableBL"></td>
<td class="msgTableB"></td>
<td class="msgTableBT"></td>
<td class="msgTableBR"></td>
</tr>
</table>
The arrow (gray block in the fiddle) should stay 42px wide and the TD element to the left should stretch to occupy the rest of the space, but that does not happen. How can that be fixed? The bubble is flexible-width, so hardcoding px values is not an option.
P.S. Why do I have to post the same code from the fiddle here? It's useless without visual representation, same as most other code!

Answer 1

What if you just add a div in the bottom middle section (42px wide and 20px high) and place that in msgTableBT cell (now with colspan of 2)? fiddle here: http://jsfiddle.net/q5wjzwLL/
<tr>
<td class="msgTableBL"></td>
<td class="msgTableBT" colspan="2"><div class="bg"></div></td>
<td class="msgTableBR"></td>
</tr>
And your CSS would change slightly:
.msgTable .msgTableBT {
background: #000000;
width: auto;
}
.bg
{
float: right;
width: 42px;
height: 20px !important;
background: #DDDDDD;
}