CODEWITHSUNDEEP
htmlcsshtml-email
dandoen
dandoen

Reputation: 1647

Styling button with border & offset using email HTML

I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:

Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.

Here's my set-up: http://jsfiddle.net/ZHkdV/

enter image description here

Upvotes: 0

Views: 1004

Answers (3)

John
John

Reputation: 12193

Here you go - only need a 30x30 image for the top corner:

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
  <tr>
    <td width="30" height="30">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
    </td>
    <td width="240" height="30">&nbsp;
    </td>
    <td width="30" height="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30" height="160">&nbsp;
    </td>
    <td width="240" height="160" valign="top">
      <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
      &nbsp;<br>
      some text here
      </font>
    </td>
    <td width="30" height="160">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
            <a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
            <td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
            <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
            BUTTON
            </font>
          </td>
          </a>

          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
        </tr>
        <tr>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

This should hold up in all clients...

Upvotes: 1

dmc
dmc

Reputation: 348

For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.

Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.

Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.

The html email Boilerplate is pretty much bulletproof.

http://htmlemailboilerplate.com/

<table> <!- Wrapper ->
    <tr>
    <td>
    <table>
    <tr>
    <td>
    </td>
    </tr>
    </table>
    </td>
    </tr>

</table>

Upvotes: 1

LouD
LouD

Reputation: 3844

Background images aren't very compatible either:

http://www.campaignmonitor.com/css/

I would just slice the last row into 3 separate images (left, button, right).

If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.

Upvotes: 0

Related Questions