Button in newsletter template viewed in outlook 2010 looks different

StackOverflow https://stackoverflow.com/questions/22127341

Question

Hi i have problem with newsletter template button in outlook seems too squishy but i use same code for this button in other tables ans in other tables seems ok :( Here this is my code for this table


                                    <table cellspacing="0" cellpadding="0">
                                        <tbody><tr>
                                            <!--<td valign="top" class="" style="padding:0 0px 15px 0">

                                            </td>-->
                                            <td valign="left" class="" style=""><a style="text-decoration: none; font-size: 16px; color: #394A58; font-weight: bold; font-family:Arial, sans-serif " href="#">Info </a>
                                            </td>
                                        </tr>
                                    </tbody></table>    
                                     <p class="" style="color:#394A58; text-align:left; font-size: 11px; line-height:17px">Iste natus error sit volu ptatem accusa tium dolor emque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
                                        <table cellspacing="0" cellpadding="0" width="90" height="20" align="left" style="mso-table-lspace:5px;mso-table-rspace:5px; margin:0;">

                                                    <tbody>
                                                        <td bgcolor="#c8c8ca" align="center" class="" style=";padding-top:2px; padding-right:0px;padding-bottom:2px ;padding-left:0px;background-color:#c8c8ca; border-top:0px ; border-bottom:0px; border-left:0px;border-right:0px;solid #eee; background-repeat:repeat-x">
                                                            <a style="
                                                            mso-table-lspace:5px;mso-table-rspace:5px;
                                                            color:#394A58;
                                                            font-size:12px;
                                                            font-weight:bold;
                                                            text-align:center;
                                                            text-decoration:none;
                                                            font-family:Arial, sans-serif;
                                                            -webkit-text-size-adjust:none;" href="">
                                                                    Read More
                                                            </a>
                                                        </td>
                                                    </tbody></table>
                                                </td>
                                            </tr>      
                                        </tbody></table>                                                        
                                    </td>
                              </tr>

I use same code to use to create buttons in this tables but this looks different :

https://imageshack.com/i/15x5qpp

and other clients

https://imageshack.com/i/f1mmxfp

Can somebody help ??

No correct solution

OTHER TIPS

You don't need all that. Here are 2 ways to make the button work:

Set padding and no table height:

<table width="90" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#c8c8ca" align="center" style="color:#394A58; font-family:Arial, sans-serif; font-size:12px; text-decoration:none; font-weight:bold; padding:10px;">
      Read More
    </td>
  </tr>
</table>

Set table height and vertical align.

<table width="90" height="35" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#c8c8ca" align="center" valign="middle" style="color:#394A58; font-family:Arial, sans-serif; font-size:12px; text-decoration:none; font-weight:bold;">
      Read More
    </td>
  </tr>
</table>

Also, put your -webkit-text-size-adjust:none;in your <body> style tag instead, then you won't have to call it over and over again.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top