CODEWITHSUNDEEP
htmlcssemailoutlook
user3332590
user3332590

Reputation: 101

HTML Email formatting messed up

Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:

http://puu.sh/84ijt.png

But they appear like this:

http://puu.sh/84ijA.png

Here is the code for it:

<tr>
    <td style="display:block;min-height:38px;max-height:38px;">
        <p style="margin-left:15px;">
            <a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;" 
href="link here..">Enquire</a>
            <a href="link here.." style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;float:left;">Full Details</a>
        </p>
    </div>
    </tr>
</td>

Upvotes: 2

Views: 1610

Answers (5)

zsawaf
zsawaf

Reputation: 2001

Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.

The way I do it is a table with in a table, so something like this:

<table width="outside container width here"> <tbody> <tr> <table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned"> <tbody><tr><td><a href="#link">Your button actually goes here</a></td></tr></tbody> </table> </tr> </tbody> </table>

Upvotes: 0

John
John

Reputation: 12183

There is a bit of mis-information in this thread.

You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm

Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.

Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:

<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
  <tr>
    <td style="padding-top:20px; padding-bottom:10px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50">&nbsp;
          </td>
          <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
            <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Enquire</a>
          </td>
          <td width="20">&nbsp;
          </td>
          <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
            <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Full Details</a>
          </td>
          <td width="50">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:

  • margin (use padding instead)
  • text-align (use align="" instead)
  • min-height & max-height
  • float (use align="" instead)
  • background-color (use bgcolor="" instead)

Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;

Upvotes: 3

Rob White
Rob White

Reputation: 1002

You could also try

<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>

I haven't tested in Outlook but it might work.

Upvotes: 0

Hauke
Hauke

Reputation: 439

Have you tried giving the <td> the background-color? (or another container)

Upvotes: 0

KM123
KM123

Reputation: 1377

As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.

I hope that helps!

Upvotes: 2

Related Questions