Вертикальное выравнивание изображения в таблице, встроенной в TD в IE8

Question

Проблема в IE8 с вертикальным выравниванием для изображений, не работающих, когда таблица встроена в TD.Это прекрасно работает во всех браузерах ...

             <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, то текст рядом с изображением будет отображаться под изображением, а не рядом с ним в IE 8 ...

<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr>
        <td id="td1" width="5%">&nbsp;</td>
        <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>  

Прекрасно работает во всех других браузерах, включая IE7.Любые идеи о том, как это исправить в IE8?

Answer 1

добавить white-space: nowrap; во вложенную таблицу

<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">