Member Avatar for visualmonk

Hello, I don't know if this is the proper area to post this, but there doesn't seem to be an email coding section.

Anyone who codes html emails is aware of the problems in making the message appear consistent in all possible email clients, browsers, etc., so I code to the lowest common denominator and use tables--sometimes embedded tables--and very little, if any, CSS. Before the deployment of IE8--everything worked well, but an annoying problem has popped up that only appears in GMAIL and HOTMAIL and ONLY in IE8--the problem does not appear in IE7, nor SAFARI or FIREFOX.

When using the html command

align="center"

anywhere in the code, the centering command cascades throughout the layout anywhere below the centering command. So an align command on the <table> tag will also center all text below the command. There does not appear to be any wasy to override this--not a css text-align command, nor an original html align command on subsequent tables or cells.

Has anybody experienced this before?

  • 3 Contributors
  • 2 Replies
  • 200 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by edwarddaniweb

Dani AI

Generated

This is a known cross-client headache. described the symptom correctly: an outer alignment instruction appears to "infect" everything below it when the message is rendered in Gmail/Hotmail inside IE8. 's quick fix (reset each cell) and 's spacer-table pattern are both pragmatic and widely used in email HTML; they work because they force explicit alignment on the content cells instead of relying on inherited presentation.

Practical troubleshooting steps

  • Isolate the problem with a tiny test message (one outer wrapper + one inner content cell). Use IE8’s developer tools (F12) on the webmail page to inspect the computed text-align of the wrapper and the inner elements — that shows whether a wrapper style is being injected by the webmail UI.
  • Try explicit inline resets on the content elements first (inline styles survive better in webmail than head CSS). If an inline style is removed or ignored by the client, fall back to per-td HTML alignment.
  • Test sending the same HTML as raw MIME (not pasted into a compose box) because webmail composition can re-wrap or sanitize markup.

A robust pattern to use

  • Keep a full-width outer table, place a fixed-width content table inside, and on the content cell explicitly reset alignment using inline styles with high specificity. This preserves a centered layout while ensuring paragraphs and inner cells render left-aligned regardless of inherited wrapper rules.

Example of the explicit-reset idea (do not paste into a compose box until tested):

<table style="width:100%;border-collapse:collapse;">
  <tr>
    <td>
      <table width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 auto;">
        <tr>
          <td style="text-align:left !important;">
            <!-- content goes here -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Notes and fallbacks

  • If inline text-align:left !important; is stripped or ineffective, explicitly set alignment on each <td> (the brute-force approach mentioned).
  • The spacer/three-column technique mentioned by is a reliable alternative when client CSS rewriting is aggressive.
  • Always test in the exact client/browser combo (Gmail in IE8) after each change so you can see how webmail sanitization affects your HTML.
Member Avatar for spyglassweb

Yes. Just put a align="left" in every td tag you want to be left justified

Member Avatar for edwarddaniweb 
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<td width="25%"></td>
<td width="50%" style="padding-left:5px;">
    <!-- your mailer code start here with fixed width for center alignment in IE gmail and hotmail-->
</td>
<td width="24%"></td>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.