Text center aligned in some clients?

Hello,

I have 'pretty much' every sorted with the design, but some email clients are displaying the body copy centre aligned instead of left aligned.

See screen shot below:

http://www.popcornbox.com/html_emails/problem1.jpg

This is my HTML

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

<head style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Superdiversity: TV's Newest Reality</title>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#99CCFF'>

<style>
td {font-size:11px;color:#FFFFFF;font-family:"trebuchet ms";}
a {color:#FFFFFF; color:#FFFFFF; color:#FFFFFF;}
</style>
<style media="all" type="text/css">table img { display:block; }</style>

<table width="100%" cellpadding="70" cellspacing="0" bgcolor='#99CCFF'>

<tr><td valign="top" align="center">

<table colspan="2" width="430" cellpadding="0" cellspacing="0">
<tr><td style="background-color:#99CCFF;border-top:0px solid #FFFFFF;border-bottom:3px solid #99CCFF;text-align:left;" align="left"></td></tr></table>

<table style="padding-top:30px" colspan="2" width="430" cellpadding="20" cellspacing="0" bgcolor="#FF3399">
<tr>

<td bgcolor="#FF3399" valign="bottom" width="150" style="padding-right:0;padding-bottom:15px"><div><img src="img/headline.gif" bgcolor="#FF3399" style="padding-top:30px" border="0" height="620px" width="110px" alt="Headline" align="left"></div></td>

<td  valign="bottom" style="line-height:17px;padding-bottom:0" width="256" height="100%" style="background-color:#FF3399;text-align:left;">

<p style="line-height:21px;font-size:14px;color:#FFFFFF;font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;"><strong>Andy Duncan</strong>, Channel 4 Chief Executive, would like to invite you to join us to hear <strong>Trevor Phillips</strong>, discuss the role that broadcasters need to play in reflecting modern Britain.</p>

<div style="border-top:1px solid #FFFFFF"></div>

<p>On the 16<sup>th</sup> Channel 4 will publish research undertaken over the year which reveals that attitudes to diversity are changing fast - as are viewers expectations. Trevor Phillips has undertaken to produce an independent assessment of this research and in the evening will present Superdiversity: TV's Newest Reality, a look at what these changing expectations mean for broadcasters in the UK and his proposal for how Channel 4 and other broadcasters can play a key role in reflecting the changing nature of diversity.</p>

<div style="border-top:1px solid #FFFFFF"></div>

<p style="line-height:15px;"><strong>Superdiversity: TV's Newest Reality</strong><br>
Wednesday 16<sup>th</sup> July<br>6:00pm for 6:30pm Speech & Q&A</p>

<div><img src="img/c4_logo.gif" padding="0" bgcolor="#FF3399" border="0" height="100px" width="256px" alt="Channel 4 Logo" align="center"></div>

<p style="line-height:15px;">7:30pm - 9:30pm Reception<br>
Channel 4, 124 Horseferry Rd, London SW1</p>

<div style="border-top:1px solid #FFFFFF"></div>

<p><strong>RSVP by July 11<sup>th</sup> to <a href="mailto:events@channel4.co.uk" title="RSVP to Channel 4 Events">events@channel4.co.uk</a></strong></p></span></td></tr>

<tr><td colspan="2" style="background-color:#99CCFF;border-top:10px solid #FF3399;" valign="top">

<span style="font-size:10px;color:#FFFFFF;line-height:120%;font-family:"Verdana, Arial, Helvetica, sans-serif;"><p>You have been sent this email because you are subscribed to our mailing list. If you do not wish to hear from us again you can <unsubscribe style="font-size:10px; color:#FFFFFF;">unsubscribe</unsubscribe></p> 

<p>Email not displaying as it should? You can always try viewing it in your <webversion style="font-size:10px; color:#FFFFFF;">browser</webversion></p>

<p>Please <forwardtoafriend style="font-size:10px; color:#FFFFFF;">click here</forwardtoafriend> if you wish to forward this email to a friend</p></span></td></tr></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

I also have a problem with the padding at the top of the invite (between the pink and blue) but I think I should have fixed this add padding to the first table.

Also, on 'most' clients there should be more space between the last line "RSVP by July 11th..." and the bottom of the invite.

This is how is should be (shown in Safari). Notice how the bottom of the graphic on the left is nicely aligned and all the spacing is consistent...

http://www.popcornbox.com/html_emails/howitshouldbe.jpg

Any other problems in my code, if anyone notices them can you shout them out!

Under a very tight deadline so it would be great if someone could help me out on this!

Thanks in advance

Diana Diana, 8 years ago

Hi Roscoe. What email clients are you getting the centered text in?


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

Hey dpotter,

I'm getting it in MSN Hotmail, Windows Live Hotmail, Outlook 2003, Outlook Express and Outlook XP. I have just added a screen shot above of how Safari displays the HTML. This is what I would like to achieve!

A link to the latest HTML - http://www.popcornbox.com/html_emails/c4/

Diana Diana, 8 years ago

What browser are you looking at the web mail versions with? I just tested your design in all of the clients you mentioned and I can't replicate the centering.

The only thing in your code that really jumped out at me was this:
<span style="font-size:10px;color:#FFFFFF;line-height:120%;font-family:"Verdana, Arial, Helvetica, sans-serif;">

First, I'm not sure why you're using a span there, a div would be a better option. Second you've got some quotation issues (either you have 1 too many opened in the span tag or 1 too few closed).

It wouldn't have anything to do with the weird centering though.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

I'm looking at the test results in Firefox (MAC) not v3!

I'll take a look at the suggestions you have just mentioned. This wouldn't be causing the last line of the body copy to be not aligned with the "W" of "Wednesday..." would it? Do you know how I could get that aligned in the clients mentioned above?

Really appreciate your help by the way :)

Roscoe, 8 years ago
dpotter :

The only thing in your code that really jumped out at me was this:
<span style="font-size:10px;color:#FFFFFF;line-height:120%;font-family:"Verdana, Arial, Helvetica, sans-serif;">

First, I'm not sure why you're using a span there, a div would be a better option. Second you've got some quotation issues (either you have 1 too many opened in the span tag or 1 too few closed).

That <span> is in a table so I used it to style the text. I have changed it to:

<p style="font-size:10px;color:#FFFFFF;line-height:120%;font-family:"Verdana, Arial, Helvetica, sans-serif;">

Would it still be better in a <div>?

Diana Diana, 8 years ago

Roscoe,

It looked like you had the style for multiple paragraphs. If you just need it for the 1 then the inline style on the p tag is fine.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Diana Diana, 8 years ago

Oh and watch the " marks in the tag. You have 2 opening (1 at the beginning and 1 around your fonts) but only 1 closing.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

I need it for three paragraphs?

<p style="font-size:10px;color:#FFFFFF;line-height:14px;font-family:Verdana, Arial, Helvetica, sans-serif;">You have been sent this email because you are subscribed to our mailing list. If you do not wish to hear from us again you can <unsubscribe style="font-size:10px; color:#FFFFFF;">unsubscribe</unsubscribe></p> 

<p style="font-size:10px;color:#FFFFFF;line-height:14px;font-family:Verdana, Arial, Helvetica, sans-serif;">Email not displaying as it should? You can always view it in your <webversion style="font-size:10px; color:#FFFFFF;">browser</webversion></p>

<p style="font-size:10px;color:#FFFFFF;line-height:14px;font-family:Verdana, Arial, Helvetica, sans-serif;">Please <forwardtoafriend style="font-size:10px; color:#FFFFFF;">click here</forwardtoafriend> if you wish to forward this email to a friend</p>

So, you have tested the email on all clients with no centering? How strange! As I said before, is there also a way in which I can neatly align all the bottom of my invite (not the disclaimer stuff). I think I may have gone a bit wrong in the structure of the whole thing to be honest :S

Diana Diana, 8 years ago

Roscoe,

If you want all 3 paragraphs to have that style I'd suggest the inline style like you're doing or you could have a div around the paragraphs with the inline style.

I did test them, it's very odd that I can't reproduce it. I'm wondering if it's something quirky with either how you're sending it or maybe a different version/browser thing.

You also have a </span> at the end of the RSVP by section that doesn't look needed, I don't see a starting tag. If you have access to an HTML validator I'd suggest running your code through it. I used the one built in in Homesite and it turned up a few odds and ends that should be addressed.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

Hi dpotter,

I spotted that </span> Will leave the paragraphs as they are in that case. I just had a look at the test results on a PC with Firefox (not v3) and they looked centered still.. Odd.

Do you have a link to that Homesite Validator?

Thanks for all your help

Diana Diana, 8 years ago

Roscoe,

It's actually built into my editing program. Perhaps whatever you're using to edit with has one? I'd suggest checking out the W3C validator http://validator.w3.org/. There were a number of small unsupported things in your code that might be throwing things off.

What client did you just test with in Firefox? Hotmail? Or are you using the testing tool?


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

Hi,

I'm using CODA to code my emails and the Campaign Monitor testing tool. I've done some stuff with w3. Still getting center aligned text in the following clients (shown in the Campaign Monitor testing tool); MSN Hotmail, Windows Live Hotmail, Yahoo! Classic (messes all the body copy up), Outlook XP, Windows Mail...

Thanks for your advice once again.

Diana Diana, 8 years ago

Hi Roscoe,

Are you importing a file from your desktop or from the web?


~*~~*~~*~~*~
D. Potter
Campaign Monitor
Roscoe, 8 years ago

From my MAC, does this make a difference? Anyway, I started 'again' cleaned it up and solved the problem! I think the code just got really messy in the end with lots of quick fixes and duplicate bits here and there.

Thanks for all your help with this

Diana Diana, 8 years ago

Roscoe,

I was just wondering if the centering was coming from some difference in how you importing because when I tried the testing tool with it there wasn't any centering. It looks like it's all resolved though, I had tested with a couple of the quirky bits of code fixed so that was likely it!


~*~~*~~*~~*~
D. Potter
Campaign Monitor
jdkrause jdkrause, 8 years ago

Roscoe I would suggest turning on the validator in Coda too. It's at the bottom. A button with a triangle on it. There are all kinds of errors in your document (as dpotter pointed out).

Roscoe, 8 years ago

Hi jdkrause,

Thanks for the advice, will check out the Coda validator.

Join 200,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