HTML columns in Gmail Newsletter

Question

I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.

<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td height="20"></td>
        </tr>

        <tr>
            <td width="225" bgcolor="#e1822d" valign="top" align="left">
                <div style="padding:12px 20px 0px 20px;">
                    <div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
                        <singleline label="Title">Tenerife</singleline>
                    </div>
                    <div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
                        <multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
                    </div>
                </div>
            </td>
            <td width="425" valign="top" align="left">
                <img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
            </td>
        </tr>
    </tbody>
</table>

And in every other mail client it outputs like this:

But in Gmail and Gmail only it outputs with an additional size in the orange column:

I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.

Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?

Answer 1

Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.

For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.

Answer 2

Each mail client has different HTML rendering technique.

I can not really find out the difference from both the images. I see both images are identical.

From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.