0

I'm trying to make a HTML email template (difficult at the best of times) and I am trying to have a double line between the header and content. I'm trying to use border styles to achieve this like so:

<div class="1"> header image </div>
<div class="2"> random text </div>

using a head style sheet:

.1 {
    margin:0;
    padding: 0;
    border-bottom:thin solid red;
}
.2 {
    margin:0;
    padding: 0;
    border-top:thin solid yellow;
}

it seems to work fine in WLM and other email clients, but not outlook.

kumar
  • 1,796
  • 2
  • 15
  • 37
user2339314
  • 1
  • 1
  • 1
  • I strongly recommened avoiding ` – andyb May 01 '13 at 12:37
  • 2
    Keep in mind that it isn't valid in CSS to have a class name [begin with a number](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names) – Adrift May 01 '13 at 12:37
  • Please describe exactly what's going wrong, or add a screenshot showing how it behaves in Outlook and how it appears in other email readers, or add a link to the full HTML source code. – Matt Coughlin May 01 '13 at 17:04
  • andyb, I do have some style data which applies to multiple divs, so i was hoping to avoid using inline styles Adrift, I am just using the number as a placeholder, they have proper names – user2339314 May 02 '13 at 05:13

3 Answers3

3

In my experience working with email HTML and Outlook, I find I always come back to using tables for layout. The many different email clients do many weird things to HTML, but table layouts seem to be the most cross-client compatible. So, consider something like this:

<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
    <tr>
        <td> header image </td>
   </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
    <tr>
        <td> random text </td>
   </tr>
</table>

I haven't tested this, but it's what I'd try first.

Gareth Cornish
  • 4,357
  • 1
  • 19
  • 22
  • I've done something similar with other emails I've designed, it just sucks...horrible habit to get into using tables for layout... – user2339314 May 02 '13 at 05:14
0

Oke to sart with, the easiest way to make a nice e-mail template is with tables ( not sure if you use them. Try to link as less as possible to your css but do style="" as much as possible.

And take a look at this one :OVER HERE! this one helped me out alot

DiederikEEn
  • 753
  • 8
  • 17
0

I would suggest you use inline CSS for the border style and hex values for the color. I have changed your code to old school CSS. Tried and tested on Litmus

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff">

      <tr>
          <td>
              <table cellpadding="0" cellspacing="0" width="50%" style="border-bottom: solid 1px #ff0000;">
                    <tr>
                        <td> header image </td>
                   </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td style="line-height: 20px; font-size: 20px;">&nbsp;</td>
      </tr>
      <tr>
          <td>
             <table cellpadding="0" cellspacing="0" width="50%" style="border-top: solid 1px #ffff00;">
                <tr>
                    <td> random text </td>
               </tr>
             </table>
          </td>
      </tr>

  </table>
Sambydev
  • 31
  • 2