Weird table formatting in Outlook 2010

Question

I have searched and searched and couldn't find the answer.

I have strange problem, shown only in Outlook 2010.

As you can see in the image, I have one big table cell (behind the image), and on the other side, on the right (not in the image) table with 9 cells, same structure used in my question which can be found Here

Now, I don't understand why Outlook 2010 is not rendering my code properly, and why do I have those black lines (spacing maybe?) on both sides of the image.

Here is my current code, I may have overlooked something... :(

<td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece"></td>

Answer 1

First, there is not enough info here to duplicate the problem. I copied your exact scenario from the link provided with the snippet above.

<table>
<tr>
    <td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece">
    </td>
    <td>
        Cell 1
    </td>
</tr>
<tr>
    <td>
        Cell 2
    </td>
</tr>
<tr>
    <td>
        Cell 3
    </td>
</tr>
<tr>
    <td>
        Cell 4
    </td>
</tr>
<tr>
    <td>
        Cell 5
    </td>
</tr>
<tr>
    <td>
        Cell 6
    </td>
</tr>
<tr>
    <td>
        Cell 7
    </td>
</tr>
<tr>
    <td>
        Cell 8
    </td>
</tr>
<tr>
    <td>
        Cell 9
    </td>
</tr>
</table>​

Tested it in Outlook 2010 on Windows 7. No problems. Please include the exact markup. Headers and body content can affect the email.

Second, what machine you are using, Outlook appears differently in XP than 7.

Third, you should not use shorthand CSS for emails. See: http://sixrevisions.com/web_design/creating-html-emails/

Fourth, paddings and margins only work on tables and td tags if they are to be cross email-client compatible: http://www.campaignmonitor.com/css/. Margins however are not supported in Hotmail. Without nesting the image into another table as per the link, you will have padding/margin issues with inner content on the first row.

Fifth, you need to close all your tags. The image did not have it's closing /.

I hunch that you may have to use nested tables here, as it may be an email client display issue. There is a section on that here: Campaignmonitor has an excelent section for design-guidelines

Try this:

<table>
<tr>
    <td>
        <table>
            <tr>                   
                <td style="padding-top: 15px; padding-right:0px; padding-bottom: 10px; padding-left:20px;" width="177px" height="177px">
                    <img alt="Image" src="http://imagelink.com" width="177px" height="177px" style="border-style:solid; border-color:#ffffff; border-width:7px; -webkit-box-shadow:0 3px 7px 1px #cecece; -moz-box-shadow:0 3px 7px 1px #cecece; box-shadow:0 3px 7px 1px #cecece" />
                </td>
            </tr>
        </table>
    </td>            
    <td>
        <table>
            <tr>
                <td>
                    Cell 1
                </td>
            </tr>
            <tr>
                <td>
                    Cell 2
                </td>
            </tr>
            <tr>
                <td>
                    Cell 3
                </td>
            </tr>
            <tr>
                <td>
                    Cell 4
                </td>
            </tr>
            <tr>
                <td>
                    Cell 5
                </td>
            </tr>
            <tr>
                <td>
                    Cell 6
                </td>
            </tr>
            <tr>
                <td>
                    Cell 7
                </td>
            </tr>
            <tr>
                <td>
                    Cell 8
                </td>
            </tr>
            <tr>
                <td>
                    Cell 9
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>​

Hope it helps!