padding in CSS tags not being read

My email renders properly when viewed in the browser, but in CM the main text and sidebar margins are off. The 20px of left padding is not being applied to the .mainText or the .sidebarbody tags in CM.

See code below. Screenshot here: http://tinyurl.com/yzj878v -- everything looks clean. How is that padding getting missed?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>eDocument Resources</title>
<style type="text/css">

body {
    background-color: #3399CC;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
p.mainText {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 10px;
    color: #000000;
    text-align: left;
    vertical-align: top;
}
.sidebarhead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #003769;
    text-align: left;
    vertical-align: top;
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
}
.subhead {
    font-size: 16px;
    color: #339933;
    text-align: left;
    vertical-align: top;
}
.mainHead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: #339933;
    text-align: left;
    vertical-align: top;
    padding-left: 20px;
}
a:link {
    color: #003300;
}
a:visited {
    color: #003300;
}
a:hover {
    color: #009900;
}
.headerfooter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: center;
}
.footerA {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: left;
    vertical-align: top;
}
.footerB {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: right;
    vertical-align: top;
}
.sidebarbody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    vertical-align: top;
    padding-left: 10px;
    padding-right: 10px;
}
.verticalline {
    background-color: #FFFFFF;
    background-image: url(images/vertline.gif);
    background-repeat: repeat-y;
    background-position: center center;
}
a:active {
    color: #003300;
}

</style>
</head><body>
<div align="center">
  <table width="700" border="0" cellspacing="0" cellpadding="0">
   
    <tr>
      <td height="12" colspan="4" class="body"><div align="center" class="headerfooter">
        <p>Having trouble reading this e-mail? <webversion>Click here</webversion> to see it in your browser. </p>
        <p>&nbsp;</p>
      </div></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="168" colspan="4"><img src="images/edoc_gen_eheader_700px_rev1.jpg" width="700" height="180" /></td>
    </tr>
    <tr>
      <td height="169" colspan="2" rowspan="2" valign="top" bgcolor="#FFFFFF">
      
      
        <repeater>
        <p class="mainHead"><$title default='Enter headline here'$></p>
        <img src="<$imagesrc link='false'$>" width="147" height="147" alt="Inline" align="right" class="inline" vspace="4" hspace="10">
        <p class="mainText"><$description$></p>
        </repeater>
     
      <td width="10" height="33" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="238" rowspan="2" valign="top" bgcolor="#FFFFFF">

        <repeater>
        <p class="sidebarhead"><$title link="true" default='Enter sidebar head'$></p>
        <p class="sidebarbody"><$description$></p>
        </repeater>
     
      </td>
    </tr>
    <tr>
      <td valign="top" class="verticalline">&nbsp;</td>
    </tr>
   
    <tr>
      <td width="343" height="48" valign="top"><p align="left" class="footerA">This email was sent to [email]<br />
          <unsubscribe><strong>Click here</strong></unsubscribe> to <em>instantly</em> unsubscribe.
      </p></td>
      <td colspan="3" valign="top" class="footerB"><a href="http://edocumentresources.com/">eDocument Resources</a><br />
        6101 Baker Road, Suite 207<br />
        Minnetonka, MN 55345<br />
      952-607-3500</td>
    </tr>
    <tr>
      <td height="0"></td>
      <td width="103"></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>
</body>
</html>

fyredefyre fyredefyre, 7 years ago

Which browser are you having issues with in particular? Your padding issues could be from the limited support Outlook 07 offers.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
BThies BThies, 7 years ago

Quickly scanning your code, I noticed you're missing a </TD> after your first repeater.

If that doesn't solve your issue, you may have to go a bit more old school with nested tables rather than padding.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

If you find that nested tables will be necessary, you can try the code below.

NOTE: This still contains the majority of your previous properties, so it hasn't been tested against any e-mail clients.  Keep in mind that background images are not supported in Outlook 2007 (for your vertical divider), image alignment may appear different across various e-mail clients, and not all e-mail clients support vspace/hspace).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>eDocument Resources</title>
<style type="text/css">
body {
    background-color: #3399CC;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
p.mainText {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding-right: 10px;
    color: #000000;
    text-align: left;
    vertical-align: top;
}
.sidebarhead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #003769;
    text-align: left;
    vertical-align: top;
}
.subhead {
    font-size: 16px;
    color: #339933;
    text-align: left;
    vertical-align: top;
}
.mainHead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: #339933;
    text-align: left;
    vertical-align: top;
}
a:link {
    color: #003300;
}
a:visited {
    color: #003300;
}
a:hover {
    color: #009900;
}
.headerfooter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: center;
}
.footerA {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: left;
    vertical-align: top;
}
.footerB {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: right;
    vertical-align: top;
}
.sidebarbody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    vertical-align: top;
}
.verticalline {
    background-color: #FFFFFF;
    background-image: url(images/vertline.gif);
    background-repeat: repeat-y;
    background-position: center center;
}
a:active {
    color: #003300;
}
</style>
</head>
<body>
<table align="center" width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="700" height="12" class="body"><div align="center" class="headerfooter">
        <p>Having trouble reading this e-mail?
          <webversion>Click here</webversion>
          to see it in your browser. </p>
        <p>&nbsp;</p>
      </div></td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td width="700" height="168"><img src="images/edoc_gen_eheader_700px_rev1.jpg" width="700" height="180" /></td>
  </tr>
  <tr>
    <td><table width="700" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td rowspan="2" width="20" bgcolor="#FFFFFF">&nbsp;</td>
          <td rowspan="2" width="432" height="169" valign="top" bgcolor="#FFFFFF"><repeater>
              <p class="mainHead">
                <$title default='Enter headline here'$>
              </p>
              <img src="<$imagesrc link='false'$>" width="147" height="147" alt="Inline" align="right" class="inline" vspace="4" hspace="10">
              <p class="mainText">
                <$description$>
                </p>
            </repeater>
          </td>
          <td width="10" valign="top" bgcolor="#FFFFFF"><div style="font-size:20px;">&nbsp;</div>
            <div style="font-size:13px;">&nbsp;</div></td>
          <td rowspan="2" width="238" valign="top" bgcolor="#FFFFFF"><table width="218" align="center" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td><repeater>
                    <p class="sidebarhead"><span style="font-size:20px;">&nbsp;</span><br />
                      <$title link="true" default='Enter sidebar head'$>
                    </p>
                    <p class="sidebarbody">
                      <$description$>
                    </p>
                  </repeater>
                </td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="10" valign="top" class="verticalline">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="700"><table width="700" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="343" height="48" valign="top"><p align="left" class="footerA">This email was sent to [email]<br />
              <unsubscribe><strong>Click here</strong></unsubscribe>
              to <em>instantly</em> unsubscribe. </p></td>
          <td width="357" valign="top" class="footerB"><a href="http://edocumentresources.com/">eDocument Resources</a><br />
            6101 Baker Road, Suite 207<br />
            Minnetonka, MN 55345<br />
            952-607-3500</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098