HTML Emails Rendering Text Centered in IE
Question
I'm sending a HTML email from Outlook to my mail.live.com account. When I view the results in mail.live.com using Firefox the email looks ok, but when I use IE all the content is centered.
I have added lots of align=left and inline CSS style='text-align:left' to control it but it doesn't make any difference.
When I load the HTML file directly into IE it's ok; only when viewing from my Live/Hotmail account it is skewed.
Has anyone had this issue?
<html>
<body style='background:#333;font-family:arial;text-align:left;'>
<style>
#BlueStripe {
color:#000000;
background:#113399;
width:800px;
height:35px;
}
#Content {
width:800px;
}
#LeftContentPanel {
border:none;
padding:20px;
padding-top:5px;
}
#LeftContentPanel h1, h2, h3 {
color:#113399;
font-family:Arial,Verdana;
font-weight:normal;
margin-bottom:5px;
}
#LeftContentPanel p {
margin-top:5px;
}
h1, h2 {
font-weight:normal;
font-size:22px;
padding-bottom:0px;
}
#RightContentPanel {
width:220px;
padding:10px;
margin-top:10px;
margin-right:30px;
color:#fff;
font-weight:normal;
}
#RightContentPanel h1, h2 {
font-weight:normal;
font-size:20px;
margin-top:5px;
margin-bottom:-5px;
}
#RightContentPanel p {
font-weight:normal;
font-size:14px;
}
.edition {
text-align:left;
font-family:Arial,Verdana;
font-weight:normal;
font-size:16px;
color:#113399;
margin-left:10px;
margin-top:15px;
}
#FooterText {
color:#113399;
font-size:12px;
}
p {
text-align:left;
}
</style>
<table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'>
<tr>
<td>
<table border='0' Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'>
<tr Id='BlueStripe' Width='800'>
<td ColSpan='3'></td>
</tr>
<!-- Header -->
<tr id='LogoTitle' align='Left'>
<!-- Col 1/2 --> <td align='left'>
<img src='logo.jpg' alt='club logo' />
</td> <!-- Col 1 -->
<!-- Col 2/2 --> <td class='Panel2' ColSpan='2'>
<br />
<img src='title.jpg' alt='club news' />
<br />
<br />
<p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 -->
</tr>
<!-- Banner Image - Dumb Bells -->
<tr Id='BannerImage' Style='width:800px;'>
<!-- Col 1/1 -->
<td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0' align='Left'>
<img src='banner.jpg' alt='Dumb Bells' Width='800px' />
</td> <!-- Col 1 -->
</tr>
<tr Id='Content' align='Left'>
<!-- Col 1/1 -->
<td ColSpan='3'>
<br />
<table id='ContentPanel' Style='margin-top:10px'>
<tr align='Left'>
<td align='Left'>
<table id='' Style='border:0;text-align:left' align='left'>
<tr>
<td Id='LeftContentPanel' Width='460'>
<h1>Insert heading here</h1>
<p>
Vellant enes mo volupition eati amenima ximpor andis es mil mi,
optate cum in niatqui dellabo. Turiti quos debis demolen dustis
que peditat iorione quidignimin non con eaquatia nullore perit,
totat incimol orrum, coriassequo quia aut eos unt quia dolent
estemquodio odionseque esed que dolupta sperror sit quia que
pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem
quam rerum autem voluptiae atur?
</p>
<h1>Insert heading here</h1>
<p>
Feremos quisinte siment. Cium volorpo ressit re, omnisci as
autent as moluptas nonsece atquaessit eum dolut aut quis
nobisto quat aborem quis antempore, id moluptatur, sa que et
ea ium apis delignisi te si aut poribus ullaudae od quia conem
se verepud itatemporum ulparum re, volut velis eatis es accum
aut ratur, vende ius si doloriorum ent qui que velesciat que nam,
alitem ati a non remperorest restrum volentintem voluptatur am
rem eumqui quat et ea quiame quat.
</p>
<p>
Occatem poreium in rehentio eat el earia iur am, et laborio.
Itatur? Quiae estiorecese conseque niet estem as etusciur mos
ipsapid que videbit audit quid ut volupta sperias sequate ctotat
et et voluptis dellest, simus, secus aute quis iliquis si quia simus.
</p>
<div id='FooterText'>
more text here
</div>
</td>
</tr>
</table>
</td>
<td Width=5></td>
<td valign='top' align='left' style='padding:15px;text-align:left'>
<table Id='RightContentPanel' Style='text-align:left;' >
<tr style='padding:15px;text-align:left'>
<td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px; background-color:#113399;'>
<h1>Insert header here</h1>
<p align='left' style='text-align:left'>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
<tr>
<td height='35'>
</td>
</tr>
<tr>
<td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'>
<h1>Insert header here</h1>
<p>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> <!-- End Col 1 -->
</tr>
<tr>
<td Id='BlueStripe' ColSpan='3'></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Additional information from another user:
None of the answers so far seem to help. I had my top level stacked tables centered and all the nested tables aligned left with text-align:left; on all possible elements and it didn't change anything.
Then I removed all instances of centered text and tables throughout the code and it STILL renders with centered text in all web email clients in IE 9. Interestingly, if I send the email from Gmail or Yahoo in IE 9, it renders properly (without having to add all the extra align/text-align lefts). However, this email must originate from Outlook, so that isn't a feasible workaround in this case.
7 answers
solution1
6 2012-03-21 02:01:51
Try putting a head tag in and end you HTML tag. Also put your style in your header tag. I did this and tried it in IE Hotmail and it worked for me.
solution2
4 ACCPTED 2011-08-17 22:42:56
There is probably a conflicting id/class in your html though that should have resulted in the same effect in all browsers.
It is impossible to tell you what is going on in your browser. Try inspecting the elements with the browsers debugging tools, this should tell you what styles are being applied to them and they should reveal where the text-align is coming from.
In Internet Explorer the shortcut for the debugging tool is F12, use the arrow in the left top of that window to be able to focus on certain elements.
solution3
4 2012-03-16 12:50:27
HTML emails are a nightmare, I have built many, many, many of them. Have you inspected the code when it renders in IE?
I found that Live/Hotmail renders differently even depending on the version of IE - let alone other browsers.
Also, and this will probably sound insulting - but have you validated the code?
Cheers
solution4
3 2011-08-17 22:40:23
As annoying as this sounds, try adding an inline text-align: left; on the paragraph tags.
For future reference, the HTML Email Boilerplate is a great base for those dreaded HTML email projects.
solution5
3 2012-03-19 21:52:48
I know this question is old, but for future reference, I did notice that the containing the main text does not have align="left" specified. Even though it is nested within other TDs that DO align=:left", sucky IE won't inherit that setting.
<!-- Col 1/1 -->
<table id='' Style='border:0;text-align:left' align='left'>
<tr>
<td Id='LeftContentPanel' Width='460' [ALIGN="LEFT" NEEDED HERE]>
<h1>Insert heading here</h1>
solution6
1 2012-03-22 22:13:52
CSS support in e-mail clients is terrible. Unfortunately sending via outlook will probably make it even worse. You may wish to consider using a service like mail chimp, but I'm guessing you've probably already thought of that and sending via outlook is a requirement of the project, so here are a few possible options (I feel your pain, I've had to fix similar things).
As a general rule of thumb code your pages as though it's 1999, I've found the campaign monitor resources invaluable.
Here is a handy guide on general good practices: http://www.campaignmonitor.com/design-guidelines/
A full break down of css support: http://www.campaignmonitor.com/design-guidelines/
And the forums are pretty handy: http://www.campaignmonitor.com/forums/
Don't worry I don't work for campaign monitor! Just things I've found useful.
A couple of things spring to mind that you could try:
Perhaps wrap your text in div's and put inline text-align:left. Or perhaps on the p tag.
I'm guessing the outer table is for centring the design? Perhaps look at an alternative techniques for centring the outer.
solution7
0 2015-03-19 15:06:31
<body style="text-align:left;">
Works like a charm. And you do not have to put it throughout the email.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.