Geek Answers Handbook

HTML letters displaying text centered in IE

I am sending HTML email from Outlook to my mail.live.com account. When I view the results in mail.live.com using Firefox, the email looks fine, but when I use IE, all the content is centered.

I added a lot of align=left and inline CSS style='text-align:left' to control it, but that doesn't make any difference.

When I upload an HTML file directly to IE, this is normal; only when viewing from my Live / Hotmail account is skewed.

Has anyone had this problem?

  <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 yet help. I had top-level tables centered, and all nested tables are left aligned with text-align:left; on all possible elements and have not changed anything.

Then I deleted all instances of centered text and tables throughout the code, and it STILL displays centered text in all email web clients in IE 9. Interestingly, if I send an email from Gmail or Yahoo in IE 9, it will be correct displayed (without the need to add all additional alignment / alignment of text on the left) However, this email should come from Outlook, so this is not a possible workaround in this case.

+8
html rendering hotmail
source share
7 answers

There is probably a conflicting id / class in your html, although this should have had the same effect in all browsers.

It is impossible to tell you what is happening in your browser. Try checking the elements using the browser debugging tools, this should tell you which styles are applied to them, and they should show where the text alignment comes from.

In Internet Explorer, the shortcut for the debugging tool is F12, use the arrow in the upper left corner of this window to be able to focus on certain elements.

+4
source share

Try tagging the title tag and ending the HTML tag. Also add your style to your title tag. I did this and tried it in IE Hotmail, and it worked for me.

+6
source share

HTML emails are a nightmare, I have created many, many, many of them. Have you checked the code when it displays in IE?

I found that Live / Hotmail renders differently even depending on the version of IE - not to mention other browsers.

Also, and that probably will sound offensive - but have you confirmed the code?

Greetings

+4
source share

How annoying this is, try adding inline text-align: left; in paragraph tags.

In the future, the HTML email boiler is a great base for these awful HTML email projects.

+3
source share

I know this question is old, but for future reference, I noticed that the containing main text does not have align = "left". Even if it is nested in other TDs that DO align =: left ", sucky IE does not inherit this 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>
+3
source share

CSS support in email clients is terrible. Unfortunately, sending via Outlook will probably be even worse. You might want to consider using a service like a mail chimpanzee, but I assume you probably already thought about it, and sending via Outlook is a project requirement, so here are a few possible options (I feel your pain, I "we had to fix things like that."

As a general rule of thumb for the code of your pages, as if it were 1999, I found the campaign monitor resources invaluable.

Here's a handy reference on common best practices: http://www.campaignmonitor.com/design-guidelines/

Complete css support crash: http://www.campaignmonitor.com/design-guidelines/

And the forums are pretty handy: http://www.campaignmonitor.com/forums/

Do not worry, I am not working to monitor the campaign! Just what I found useful.

A few spring things so you can try:

Perhaps wrap the text in a div and put inline text-align: left. Or maybe on the p tag.

I assume that the external table is designed to center the design? Perhaps look at alternative methods for centering the outside.

+1
source share
 <body style="text-align:left;">

It works like a charm. And you do not need to indicate it by email.

0
source share

More articles:


All Articles