Hi there

I have a responsive email template set up with a row of 3 buttons, that fold down on mobile devices and that sit together on desktop/wider screens. This works everywhere when I test it on litmus, including all Outlook varients. However on my clients desktop version of Outlook 2010, the third button is pushed round to the next line.

Below is the code section (please excuse the untidiness/possible incorrect code, I'm not a coder and have cobbled this together from another template I was provided).

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="100%" valign="top" bgcolor="#505c3d">
            <table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td width="600" bgcolor="#8f986e" border="0" cellpadding="0" cellspacing="0" align="center" class="MobileScale">
                        <table width="560" border="0" cellpadding="0" cellspacing="0" align="center" class="MobileScale2">
                            <tr>
                                <td width="100%">

                                    <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->                
<!-- BUTTON 1 -->               
                  <table style="table-layout: auto; background-color: #8f986e;" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0" width="180" bgcolor="#8f986e">
                    <tr>
                        <td valign="top" align="center">
                             <table style="table-layout: auto;" align="center" border="0" cellspacing="0" cellpadding="0" width="180">
                                <tr>
                                    <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><!--[if mso]>&nbsp;<![endif]--><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Visit Website &rarr;</a><!--[if mso]>&nbsp;<![endif]--></td>
                                </tr>
                                <tr>
                                    <td style="font-size:1px;line-height:1px;" height="15">&nbsp;</td>
                                    </tr>
                            </table>
                        </td>
                    </tr>
                </table>

 <!-- BUTTON 1  END-->    

                                    <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->

                <table style="background-color: #8f986e; table-layout: auto; " align="left" border="0" cellpadding="0" cellspacing="0" width="10" bgcolor="#8f986e">
                    <tr>
                        <td class="hide" align="left" width="10">&nbsp;</td>
                    </tr>
                </table>

                                    <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->

 <!-- BUTTON 2 -->  

               <table style="table-layout: auto; background-color: #8f986e;" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0" width="180" bgcolor="#8f986e">
                    <tr>
                        <td valign="top" align="center">
                             <table style="table-layout: auto;" align="center" border="0" cellspacing="0" cellpadding="0" width="180">
                                <tr>
                                    <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><!--[if mso]>&nbsp;<![endif]--><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Availability &rarr;</a><!--[if mso]>&nbsp;<![endif]--></td>
                                </tr>
                                <tr>
                                    <td style="font-size:1px;line-height:1px;" height="15">&nbsp;</td>
                                    </tr>
                            </table>
                        </td>
                    </tr>
                </table>

 <!-- BUTTON 2 END-->                                       
                                    <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->

                 <table style="background-color: #8f986e; table-layout: auto; " bgcolor="#8f986e" align="left" border="0" cellpadding="0" cellspacing="0" width="10">
                    <tr>
                        <td class="hide" align="left" width="10">&nbsp;</td>
                    </tr>
                 </table>

                                    <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->

 <!-- BUTTON 3 -->                                     
                   <table style="table-layout: auto; background-color: #8f986e;" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0" width="180" bgcolor="#8f986e">
                    <tr>
                        <td valign="top" align="center">
                             <table style="table-layout: auto;" align="center" border="0" cellspacing="0" cellpadding="0" width="180">
                                <tr>
                                    <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><!--[if mso]>&nbsp;<![endif]--><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Specification &rarr;</a><!--[if mso]>&nbsp;<![endif]--></td>
                                </tr>
                                <tr>
                                    <td style="font-size:1px;line-height:1px;" height="15">&nbsp;</td>
                                    </tr>
                            </table>
                        </td>
                    </tr>
                </table>
   <!--[if gte mso 9]>
                                                </td>
                                                <td valign="top">
                                            <![endif]-->

   <!-- BUTTON 3 END -->                                       

                                </td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Is there something obvious I am missing? I've tried adjusting the inner table width but the same happens each time, I've got the various bug fixes and settings in the header - I'm just confused as it tests perfectly in litmus!

Thanks in advance :0)

Katherine