Vertical align image in a table embedded in a TD in IE8

Having problem in IE8 with vertical align for images not working when a table is embedded in a TD. This works fine in all browsers...

             <table cellpadding="1" cellspacing="1">
                <tr>
                    <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td>
                </tr>
            </table>  

But if I put that in a table td then the text next to the image gets rendered UNDER the image instead of next to it in IE 8...

<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr>
        <td id="td1" width="5%">&nbsp;</td&开发者_StackOverflowgt;
        <td id="td2" align="center" width="30%">    
             <table cellpadding="1" cellspacing="1">
                <tr>
                    <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td>
                </tr>
            </table>       
        </td>
        <td id="td3" align="center" width="30%">&nbsp;</td>
        <td id="td4" width="30%">&nbsp;</td>
        <td id="td5" width="5%">&nbsp;</td>
    </tr>
</table>  

Works fine in all other browsers including IE7. Any ideas on how to fix this in IE8?

---

add white-space: nowrap; to the nested table

<table border="0" cellpadding="2" cellspacing="0" width="70%">
    <tr>
        <td id="td1" width="5%">&nbsp;</td>
        <td id="td2" align="center" width="30%">    
             <table cellpadding="1" cellspacing="1" style="white-space: nowrap">