Menu
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>
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.
685
Outlook versions use the Microsoft Word engine to render HTML emails. Email service providers such as Outlook interpret HTML code in different ways which can cause your email to look different in Outlook than what it looks like in your email marketing platform.
Hybrid design uses inline-block , max-width , min-width to stack table columns. Outlook doesn't support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook.
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.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
