CODEWITHSUNDEEP
htmlemailhtml-email
pkern
pkern

Reputation: 11

Outlook is resizing the width of my tables on the receiving end from 356 to

Below is the code I have created. When a client opens the email on their end in Outlook 2010 The table width is changed from 356 to width="445" style="width:267.0pt

I have tried to change the below code to include the style width info but that didn't help. On the receive end the width was still changed to 445.

This is what is added specifically to the tables 

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="445" style="width:267.0pt">

This is my original code

<HTML><HEAD>
</HEAD>
<BODY style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana" background="">
<table id="Table2" width="356" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <p align=center>
        <i><font face="Calibri" style="" color=#1f497d size="3">Click on my 
        business card and its tabs to learn more.<br><br>
</font></i></td>
</tr>
<tr>
    <td>
<table id="Table3" width="356" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <a href="http://www.wfasignatures.com/wayne.osher/Tab_1.php">
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_01.jpg" width="119" height="37" style=display:block alt="What’s Going on in Your Life?"></a></td>
    <td>
        <a href="http://www.wfasignatures.com/wayne.osher/Tab_2.php">
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_02.jpg" width="118" height="37" style=display:block alt="Investment Tools & Insights"></a></td>
    <td>
        <a href="http://www.wfasignatures.com/wayne.osher/Tab_3.php">
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_03.jpg" width="119" height="37" style=display:block alt="Make an Introduction"></a></td>
</tr>
</table></td>
</tr>
<tr>
    <td>
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_04.jpg" width="356" height="104" style=display:block alt=""></td>
</tr>
<tr>
    <td>
<table id="Table4" width="356" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_05.jpg" width="11" height="101" style=display:block alt=""></td>
    <td>
        <img border="0" src="http://saf.wellsfargoadvisors.com/faphotos/Photos/68/373868.jpg" width="81" height="101" style=display:block alt=""></td>
    <td>
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_07.jpg" width="264" height="101" style=display:block alt=""></td>
</tr>
</table></td>
</tr>
<tr>
    <td>
        <a href="http://home.wellsfargoadvisors.com/wayne.osher&cid=FA110031909">
        <img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_08.jpg" width="356" height="131" style=display:block alt="Visit my webpage"></a></td>
</tr>
<tr>
    <td>
        <a href="http://www.wfasignatures.com/wayne.osher/Wayne-Osher.vcf"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_09.jpg" width="356" height="34" style=display:block alt="Add me to your Contacts"></a></td>
</tr>
</table></BODY></HTML>

Upvotes: 1

Views: 3497

Answers (1)

adzza24
adzza24

Reputation: 2124

You need to clean up your code a bit and add a few Outlook fixes I think.

  • in your head add the following code:

    <style type="text/css">
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * {line-height: 110%;}
body { width: 100% !important; -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important;
        mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>

This will fix a number of known rendering issues.

  • close off your p tags. You seem to open them but not close them in your code. In fact, just avoid p tags altogether. Add your styles directly to the td and place your text straight inside
  • add quote marks around your style="diplay:block" on your images
  • add a doctype at the very top of the file: <!DOCTYPE html>
  • don't have line breaks between img and a tags inside the td

  • put a table around the whole email at 100% width:

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * {line-height: 110%;}
body { width: 100% !important; -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important;
        mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
</head>
<body bgcolor="#ffffff" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="356" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" style="font-family:Calibri; color:#1f497d; font-size:3; font-style:italic; padding:0 0 15px 0;">Click on my business card and its tabs to learn more.</td>
        </tr>
        <tr>
          <td align="left" valign="top"><table id="Table3" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" valign="top"><a href="http://www.wfasignatures.com/wayne.osher/Tab_1.php"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_01.jpg" width="119" height="37" style="display:block;" alt="What’s Going on in Your Life?"></a></td>
                <td align="left" valign="top"><a href="http://www.wfasignatures.com/wayne.osher/Tab_2.php"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_02.jpg" width="118" height="37" style="display:block" alt="Investment Tools & Insights"></a></td>
                <td align="left" valign="top"><a href="http://www.wfasignatures.com/wayne.osher/Tab_3.php"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_03.jpg" width="119" height="37" style="display:block" alt="Make an Introduction"></a></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_04.jpg" width="356" height="104" style="display:block;" alt=""></td>
        </tr>
        <tr>
          <td align="left" valign="top"><table id="Table4" width="356" height="101" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_05.jpg" width="11" height="101" style="display:block;" alt=""></td>
                <td align="left" valign="top"><img border="0" src="http://saf.wellsfargoadvisors.com/faphotos/Photos/68/373868.jpg" width="81" height="101" style="display:block;" alt=""></td>
                <td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_07.jpg" width="264" height="101" style="display:block;" alt=""></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td align="left" valign="top"><a href="http://home.wellsfargoadvisors.com/wayne.osher&cid=FA110031909"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_08.jpg" width="356" height="131" style="display:block;" alt="Visit my webpage"></a></td>
        </tr>
        <tr>
          <td align="left" valign="top"><a href="http://www.wfasignatures.com/wayne.osher/Wayne-Osher.vcf"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_09.jpg" width="356" height="34" style="display:block;" alt="Add me to your Contacts"></a></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Upvotes: 3

Related Questions