Odd borders, Gmail - help needed asap!

Hello.

My email campaign > http://www.popcornbox.com/email_testing/save_the_date.html is looking fine in testing apart from in Gmail, the border to the left and right of the body text appears to jut-out (or be on the outside) of the table, as shown below:

http://xs123.xs.to/xs123/08015/Picture7.png

Anyone any ideas regarding this? I have used borders in the images and called the border in HTML in the body part.

The deadline to send this is in a couple of hours so any help really appreciated!

Thanks in advance,
Roscoe

zapatoche, 8 years ago

the problem is that the border style add some width to the table cell,
i added a wrapper around your content and moved the style to it,

<td valign="top" bgcolor="#ACBBA6" width="500" style="font-size:12px;color:#333333;line-height:20px;font-family:'Trebuchet MS',Verdana,Arial;text-align:center;"><div style="margin: 0; padding: 20px; border-left:2px #FFFFFF solid;border-right:2px #FFFFFF solid;"><p style="font-size:24px;font-weight:bold;color:#FFFFFF;font-family:'Trebuchet MS',Verdana,Arial;line-height:20px;">Save the Date! - Feel Better with Radox</p><p style="">On Friday 25th January, Radox, the UK’s number 1 washing and bathing brand, invites you to join them at the relaunch of the range (including lots of exciting new products for 2008) and also to celebrate their 100th birthday.</p><p style="font-size:16px;font-weight:normal;color:#FFFFFF;font-family:'Trebuchet MS',Verdana,Arial;">The drop in press day will take place at the Century Club on Shaftesbury Avenue from 9am-5pm</p><p>Come along and get rid of the January blues with a one-to-one appointment with a leading expert – we have a reflexologist on hand to ease away tension and stimulate the natural healing process, a nutritionist to help you get back in shape for spring, and a naturopath to restore health and balance your body and mind. Oh and a manicurist and pedicurist too, just in time for the weekend!</p><p style="font-size:16px;font-weight:normal;color:#FFFFFF;font-family:'Trebuchet MS',Verdana,Arial;">We will be in touch with more details, but for now, Happy New Year, we look forward to seeing you on the 25th!</p><p>The Radox Team at Slice - <a href="mailto:radox@slice.co.uk">radox@slice.co.uk</a></p></div></td>

it work fine on gmail for me

Roscoe, 8 years ago

Lovely, that works a treat. Thanks for your quick response.

zapatoche, 8 years ago

cool :)

Roscoe, 8 years ago

Ok, back again.

In Hotmail I'm getting a 'gap' between the tables of the graphics and body content:

http://xs323.xs.to/xs323/08015/Picture.png

Any ideas :S

The latest code is here >> http://www.popcornbox.com/email_testing/save_the_date.html

EDIT:

I found the solution on another thread.

Fixed the problem using CSS in the head and display:block.

<style media="all" type="text/css">
table img { display:block; }
</style>

zapatoche, 8 years ago

been running your thing in Hotmail, didn't know about this fix, tried on one of my file but did not fix it.
other wise i saw that the border around your content block do not appear in Hotmail.

i posted about it earlier when i found that inline border style appear in Hotmail only if used with color keywords, not hex value.

<div style="margin:0;padding:20px; border-left:2px white solid;border-right:2px white solid;">
morley, 8 years ago

Hey Roscoe,

You can also solve this problem by adding a DOCTYPE at the top of your email, for example this one for XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01 treats images slightly differently than XHTML 1.0, which results in odd spaces around images.

Edit: Err, by "at the top of your email" I mean "at the top of your HTML file." They are explained here:
http://en.wikipedia.org/wiki/Document_Type_Declaration

zapatoche, 8 years ago

Hi there,

back to the old post...
I used extensively this little table img {display: block;} trick to remove the unwanted gap in Hotmail (IE only) and Gmail (IE only).
i tend to keep my html email in good old:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

just to make sure i don't have to be too semantic due mostly to the Windows Hotmail discrepancies .

I had to rework some of my layouts. I've been asked by my email delivery software company to slice the big promotions images. I tried to leave them all together in the same table cell, but with the display: block the images would just wrap one under the other.

At the moment due to dead line i had to put every images in it's on cell so that the layout would behave and still not show unwanted gap in Hotmail and Gmail on IE, thus making my HTML a bit needlessly complicated.

So today i decided to rework the thingy, I removed the img {display: block;}  from the  css and tested again  against Hotmail and Gmail.

When the gap would appear again,  just removed every white space between rows or table and magically the gap disappeared.

but i read that before somewhere like here

Now it is not really a problem anymore as i manually remove loads of white space to optimize the file size and keep a bit a of readability for the main blocks of my emails.

That's what i found collapse white space = collapse unwanted gap.

Anybody with a similar experience or  a different view?

Cheers

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098