CODEWITHSUNDEEP
backgroundoutlookhtml-tablehtml-emailcellspacing
Theodore Kincaid
Theodore Kincaid

Reputation: 11

Outlook not respecting table cell width in html email

I am trying to create an HTML email that uses gradients that will render properly in all email clients. I initially tried a vertically repeating 1px by 13px image background using a TD property and CSS but Outlook said "no." Now I have gone to making 13 TD's with a width of 1px and background colors that make up the gradient, but outlook is rending them as about 3px wide with 1px borders.

Here is the code. How can I please Outlook, or is there a way to please Outlook? 

<table width="730px" cellpadding="0px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial; margin-left:auto; margin-right:auto; margin-bottom:0;" bgcolor="#fbebd8">
    <tr valign="top">
        <td bgcolor="#fff" width="1px"> </td>
        <td bgcolor="#fff" width="1px"> </td>
        <td bgcolor="#fdfcfa" width="1px"> </td>
        <td bgcolor="#fcf8f5" width="1px"> </td>
        <td bgcolor="#f7f2ee" width="1px"> </td>
        <td bgcolor="#f2e7e1" width="1px"> </td>
        <td bgcolor="#efded4" width="1px"> </td>
        <td bgcolor="#e9d3c5" width="1px"> </td>
        <td bgcolor="#dfc8b6" width="1px"> </td>
        <td bgcolor="#d9bba3" width="1px"> </td>
        <td bgcolor="#e4cab3" width="1px"> </td>
        <td bgcolor="#ddc7b0" width="1px"> </td>
        <td bgcolor="#ebd9c3" width="1px"> </td>
        <td bgcolor="#f9e7d1" width="1px"> </td>
        <td> 

            <!-- embedded half-left table -->

            <table width="348px"  cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;">
                <tr>
                    <td colspan="3" valign="top">
                        <p><strong>Lorem Ipsum</strong></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
                    <td valign="top"> <img src="CaseNotes/archive/20120815-honors-college.jpg" alt="" height="81" width="100" /> </td>
                </tr>
            </table>
            <!-- end half-left table --> 
        </td>
        <td bgcolor="#999999" > <img width="2px" src="CaseNotes/greybox.jpg" /> </td>
        <td>
            <table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;" >
                <!-- half-right table -->
                <tr valign="top">
                    <td valign="top" colspan="3">
                        <p><strong>Lorem Ipsum</strong></p>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
                    <td> <img src="CaseNotes/superman.jpg" alt="" height="150px" width="150px" /> </td>
                </tr>
            </table>
            <!-- end half-right table --> 
        </td>
        <td bgcolor="#f9e8d4" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e7cfb8" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ead2bb" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e5c8b0" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#b17853" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#b88460" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#c29371" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#cca385" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#d5b39a" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ddc2ad" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e5cfbe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ebdbce" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#f1e5dc" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#f6efe9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#faf5f2" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fdfaf9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fefefd" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fffefe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
    </tr>
</table>
<!-- end super table -->

Upvotes: 1

Views: 3180

Answers (3)

zazzyzeph
zazzyzeph

Reputation: 1795

foolproof backgrounds for emails: http://emailbg.net/

put your hosted image url on the top left, make sure sure your image dimensions are correct in the code (you may have to hit enter again in the top left text-box), and make sure you click single table cell :)

I use this frequently. Tested in Litmus and fully compliant across the board.

Upvotes: 0

BraMKJ
BraMKJ

Reputation: 193

Try declaring your width twice. Once as an html attribute and once as an inline css-style.

For example try this:

Some e-mail clients use the html attributes, I think Outlook 2010 uses the inline style.

Upvotes: 0

user1174141
user1174141

Reputation: 71

I don't know if this is the issue or not but, when defining a width out of css, but as a property, you don't define it with a px.

For instance: <td width="1">

In comparison, css would make it: <td style="width:1px;">;

Upvotes: 0

Related Questions