Background color gone wild!

Hello all

I'm trying to build my own custom template, so far so good, but I seem to have a problem when viewing it in Outlook on Windows 7. The background color of my second table simply becomes the background color of most of the screen. I have the following code:

<html>
<head>
<style type="text/css">
#table-background { background-color: #FFFFFF; }
#header { background-color: #F5F4F3; margin: auto; border: none; padding: 0px; }
#headerRight { text-align: right; }
#header p { margin: 0px; padding: 0px; color: #666666; font-size: 12px; font-family: Helvetica, Arial; }
#header a { margin: 0px; padding: 0px; color: #666666; font-size: 12px; font-family: Helvetica, Arial; font-weight: bold; }
.vpadding20 { margin: 0px; padding: 0px; height: 5px; border: none; }
.vpadding15 { margin: 0px; padding: 0px; height: 15px; border: none; }
.hpadding20 { margin: 0px; padding: 0px; width: 5px; border: none; }
#teaserWrapper { margin: auto; background-color: #F5F4F3; }
#pictureWrapper { background-color: #FFFFFF; margin: auto; }
#contentWrapper { background-color: #FFFFFF; margin: auto; }
#contentText { text-align: left; color: #4d4d4d; font-size: 14px; font-family: Georgia, sans serif; }
#contentText a { text-align: left; color: #4d4d4d; font-size: 14px; font-family: Georgia, sans serif; font-weight: bold; }
#invitationType { text-align: left; background-color: #7FBF54; margin-left: 10px; padding: 4px; color: #FFFFFF; font-weight: light; font-family: Georgia, serif; font-size: 20px; text-decoration: none; }
#invitationDescription { text-align: left; color: #4d4d4d; font-size: 16px; font-family: Georgia; }
#informationWrapper { background-color: #F0F4F5; margin: auto; }
#informationArea { margin: auto; }
#informationArea p { margin: 0px; padding: 0px; }
.informationTitle { color: #666666; font-size: 18px }
.informationUndertitle { color: #000000; font-weight: bold; font-size: 14px; font-family: Georgia, sans serif; }
.informationContent { vertical-align: text-top; color: #4d4d4d; font-size: 14px; font-family: Georgia; }
#footer { background-color: #F5F4F3; margin: auto; border: none; padding: 0px; }
.footerContentRight { text-align: right; color: #4d4d4d; font-size: 12px; font-family: Helvetica, Arial; }
.footerContentLeft { text-align: left; color: #4d4d4d; font-size: 12px; font-family: Helvetica, Arial; }
.footerContentRight a { font-weight: bold; text-align: right; color: #4d4d4d; font-size: 12px; font-family: Helvetica, Arial; text-decoration: none; }
.footerContentLeft a { font-weight: bold; text-align: left; color: #4d4d4d; font-size: 12px; font-family: Helvetica, Arial; text-decoration: none; }
#Spacy { margin: auto; }
.topAlign { vertical-align: text-top; }
.noPad { margin: 0px, padding: 0px; }
</style>
</head>
<body>
<table width="100% id="table-background"><tr><td>
    <table width="500" id="header">
        <tr>
            <td class="hpadding20"></td>
            <td width="300">
                <table><tr><td width="300" class="vpadding20"></td></tr></table>
                    <p>Having trouble viewing this email?<br><webversion>View it in your browser!</webversion></p>
                <table><tr><td width="300" class="vpadding20"></td></tr></table>
            </td>
            <td class="topAlign" width="200">
                <table><tr><td width="300" class="vpadding20"></td></tr></table>
                <table>
                    <tr>
                        <td>
                            <p><fblike><img src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" border="0" width="8" height="14" alt="Facebook icon"="">&nbsp;Like</fblike></p>
                        </td>
                        <td>
                            <p><tweet><img src="https://img.createsend1.com/img/templatebuilder/tweet-glyph.png" border="0" width="17" height="13" alt="Twitter icon"="">&nbsp;Tweet</tweet></p>
                        </td>
                        <td>
                            <p><forwardtoafriend><img src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" border="0" width="19" height="14" alt="Forward icon"="">&nbsp;Forward</forwardtoafriend></p>
                        </td>
                    </tr>
                </table>
                <table><tr><td width="300" class="vpadding20"></td></tr></table>
            </td>
            <td class="hpadding20"></td>
        </tr>
    </table>
    <table width="500" id="pictureWrapper">
        <tr>
            <td class="vpadding20"></td>
        </tr>
        <tr>
            <td width="500">
            <img src="CBS_logo.png">
            </td>
        </tr>
        <tr>
            <td class="vpadding20"></td>
        </tr>
    </table>
    <table width="480" id="teaserWrapper">
        <tr>
            <td width="480">
                <table><tr><td width="480" class="vpadding20"></td></tr></table>
                <center><img width="460" src="img.jpg" editable="true"></center>
                <table><tr><td width="480" class="vpadding20"></td></tr></table>
            </td>
        </tr>
        <tr>
            <td width="480">
                <table id="invitationType"><tr><td>
                    <span><singleline editable="true" label="Fx Afskedsreception, Gæsteforelæsning osv.">Invitationstype</singleline></span>
                </td></tr></table>
                <table><tr><td width="480" class="vpadding20"></td></tr></table>
            </td>
        </tr>
        <tr>
            <td width="480">
                <table>
                    <tr>
                        <td class="hpadding20"></td>
                        <td width="460">
                            <span id="invitationDescription"><multiline label="Hvad kommer der til at ske? Hvem kommer? Hvornår foregår det=? Benyt dig evt. af fed skrift til at fremhæve personer, tider mm.">Beskriv kort arrangementet</multiline></span>
                        </td>
                        <td class="hpadding20"></td>
                    </tr>
                </tr>
                <table><tr><td width="480" class="vpadding20"></td></tr></table>
            </td>
        </tr>
    </table>
    <table width="480" id="contentWrapper">
        <tr>
            <td colspan="3" class="vpadding15"></td>
        </tr>
        <tr>
            <td class="hpadding20"></td>
            <td id="contentText" width="460">
                <p class="noPad"><multiline label="Uddyb arrangementet. Her kan du skrive ligeså meget du har lyst til">Uddyb arrangementet</multiline><p>
            </td>
            <td class="hpadding20"></td>
        </tr>
        <tr>
            <td colspan="3" class="vpadding15"></td>
        </tr>
    </table>
    <table width="480" id="informationWrapper">
        <tr>
            <td class="vpadding20"></td>
        </tr>
        <tr>
            <td width="480">
                <table width="460" id="informationArea">
                    <tr>
                        <td class="topAlign" width="460" colspan="2">
                            <span class="informationTitle">Information</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="topAlign" width="230">
                            <span class="informationUndertitle">Sted</span><br>
                            <p><span class="informationContent"><multiline class="informationContent" label="Her skrives information om hvor arrangementet finder sted">Skriv hvor arrangementet finder sted</multiline></span></p>
                        </td>
                        <td class="topAlign" width="230">
                            <span class="informationUndertitle">Tid</span><br>
                            <p><span class="informationContent"><multiline label="Skriv hvornår arrangementet finder sted">Mandag, den 23. august 2011, 16:00 - 18:00</multiline></span></p>
                        </td>
                    </tr>
                    <tr>
                        <td width="460" colspan="2">
                            <span class="informationUndertitle">Tilmelding</span><br>
                            <p><span class="informationContent"><multiline editable="true" label="Skriv hvordan man tilmelder sig">Det er begrænset antal sæder. Tilmeld dig nu ved at...</multiline></span></p>
                        </td>
                    </tr>
                </table>                            
            </td>
        </tr>
        <tr>
            <td class="vpadding20"></td>
        </tr>
    </table>
    <table id="Spacy">
        <tr><td width="480" class="vpadding15"></td></tr>
    </table>
    <table width="500" id="footer">
        <tr>
            <td colspan="4" width="500" class="vpadding20"></td>
        </tr>
        <tr>
            <td class="hpadding20"></td>
            <td width="480">
                <table width="350" class="footerContentLeft">
                    <tr>
                        <td class="topAlign" width="350">
                            <p class="noPad">You're receiving this because you subscribed from our webpage</p>
                        </td>
                    </tr>
                    <tr>
                        <td class="topAlign" width="350">
                            <p class="noPad"><preferences>Edit your subscription</preferences> | <unsubscribe>Unsubscribe instantly</unsubscribe></p>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table width="140" class="footerContentRight">
                    <tr>
                        <td class="topAlign" width="140">
                            <p class="noPad">Copenhagen Business School<br>Solbjerg Plads 3<br>2000 Frederiksberg</p>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="hpadding20"></td>
        </tr>
        <tr>
            <td colspan="4" width="500" class="vpadding20"></td>
        </tr>
    </table>                
</td></tr></table>
</body>
</html>

It should look something like this: http://img607.imageshack.us/img607/5129/skrmbillede20120103kl09.png
But ends up as: http://img7.imageshack.us/img7/5129/skrmbillede20120103kl09.png

I hope some of you can help :)

roshodgekiss roshodgekiss, 4 years ago

Hi Vix! The issue is the id #teaserWrapper being applied to the entire surrounding table, not just the cell with the <singleline> and <multiline> editable regions. As a result, the entire table is being given background-color: #F5F4F3;.

There's also a bit of invalid code in here, too, so I suspect this design will look as desired as soon as you move #teaserWrapper to a cell and validate your code using a tool like Fractal.

All the best with your design!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vix, 4 years ago

But why is that a problem? The table is closed again later on, but still continues to set the background color of my #contentWrapper. I tried to set the color of the 3 <tr> that are in the table #teaserWrapper but I still get the same problem.

Thank you for thumbs up on Fractal ;)

roshodgekiss roshodgekiss, 4 years ago

Hi Vix, it was most certainly a bit of invalid code and some unclosed tags. I've cleaned up the code above a bit (see below), so it should look fine now. Let me know if you come across any further issues :)

Btw, margin: auto; isn't particularly reliable for setting center-aligned layouts - in the future, I recommend using the attribute, align="center".

<!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=UTF-8" />
<title>Invitation</title>
<style type="text/css">
#table-background {
    background-color: #FFFFFF;
}
#header {
    background-color: #F5F4F3;
    border: none;
    padding: 0px;
}
#headerRight {
    text-align: right;
}
#header p {
    margin: 0px;
    padding: 0px;
    color: #666666;
    font-size: 12px;
    font-family: Helvetica, Arial;
}
#header a {
    margin: 0px;
    padding: 0px;
    color: #666666;
    font-size: 12px;
    font-family: Helvetica, Arial;
    font-weight: bold;
}
.vpadding20 {
    margin: 0px;
    padding: 0px;
    height: 5px;
    border: none;
}
.vpadding15 {
    margin: 0px;
    padding: 0px;
    height: 15px;
    border: none;
}
.hpadding20 {
    margin: 0px;
    padding: 0px;
    width: 5px;
    border: none;
}
#teaserWrapper {
    background-color: #F5F4F3;
}
#pictureWrapper {
    background-color: #FFFFFF;
}
#contentWrapper {
    background-color: #FFFFFF;
}
#contentText {
    text-align: left;
    color: #4d4d4d;
    font-size: 14px;
    font-family: Georgia, sans serif;
}
#contentText a {
    text-align: left;
    color: #4d4d4d;
    font-size: 14px;
    font-family: Georgia, sans serif;
    font-weight: bold;
}
#invitationType {
    text-align: left;
    background-color: #7FBF54;
    margin-left: 10px;
    padding: 4px;
    color: #FFFFFF;
    font-weight: light;
    font-family: Georgia, serif;
    font-size: 20px;
    text-decoration: none;
}
#invitationDescription {
    text-align: left;
    color: #4d4d4d;
    font-size: 16px;
    font-family: Georgia;
}
#informationWrapper {
    background-color: #F0F4F5;
}
#informationArea {
}
#informationArea p {
    margin: 0px;
    padding: 0px;
}
.informationTitle {
    color: #666666;
    font-size: 18px
}
.informationUndertitle {
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    font-family: Georgia, sans serif;
}
.informationContent {
    vertical-align: text-top;
    color: #4d4d4d;
    font-size: 14px;
    font-family: Georgia;
}
#footer {
    background-color: #F5F4F3;
    border: none;
    padding: 0px;
}
.footerContentRight {
    text-align: right;
    color: #4d4d4d;
    font-size: 12px;
    font-family: Helvetica, Arial;
}
.footerContentLeft {
    text-align: left;
    color: #4d4d4d;
    font-size: 12px;
    font-family: Helvetica, Arial;
}
.footerContentRight a {
    font-weight: bold;
    text-align: right;
    color: #4d4d4d;
    font-size: 12px;
    font-family: Helvetica, Arial;
    text-decoration: none;
}
.footerContentLeft a {
    font-weight: bold;
    text-align: left;
    color: #4d4d4d;
    font-size: 12px;
    font-family: Helvetica, Arial;
    text-decoration: none;
}
#Spacy {
}
.topAlign {
    vertical-align: text-top;
}
.noPad {
margin: 0px, padding: 0px;
}
</style>
</head>
<body>
<table cellpadding="0" width="500" border="0" align="center">
  <tr>
    <td><table cellpadding="0" width="500" id="header">
        <tr>
          <td class="hpadding20"></td>
          <td width="300"><table cellpadding="0" >
              <tr>
                <td width="300" class="vpadding20"></td>
              </tr>
            </table>
            <p>Having trouble viewing this email?<br />
              <webversion>View it in your browser!</webversion>
            </p>
            <table cellpadding="0" >
              <tr>
                <td width="300" class="vpadding20"></td>
              </tr>
            </table></td>
          <td class="topAlign" width="200"><table cellpadding="0" >
              <tr>
                <td width="300" class="vpadding20"></td>
              </tr>
            </table>
            <table cellpadding="0" >
              <tr>
                <td><p>
                    <fblike><img src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" border="0" width="8" height="14" alt="Facebook icon" />&nbsp;Like</fblike>
                  </p></td>
                <td><p>
                    <tweet><img src="https://img.createsend1.com/img/templatebuilder/tweet-glyph.png" border="0" width="17" height="13" alt="Twitter icon" />&nbsp;Tweet</tweet>
                  </p></td>
                <td><p>
                    <forwardtoafriend><img src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" border="0" width="19" height="14" alt="Forward icon" />&nbsp;Forward</forwardtoafriend>
                  </p></td>
              </tr>
            </table>
            <table cellpadding="0" >
              <tr>
                <td width="300" class="vpadding20"></td>
              </tr>
            </table></td>
          <td class="hpadding20"></td>
        </tr>
      </table>
      <table cellpadding="0" width="500" id="pictureWrapper">
        <tr>
          <td class="vpadding20"></td>
        </tr>
        <tr>
          <td width="500"><img src="CBS_logo.png" /></td>
        </tr>
        <tr>
          <td class="vpadding20"></td>
        </tr>
      </table>
      <table cellpadding="0" width="480" align="center" id="teaserWrapper">
        <tr>
          <td width="480"><table cellpadding="0">
              <tr>
                <td width="480" class="vpadding20"></td>
              </tr>
            </table>
            <center>
              <img width="460" src="img.jpg" alt="" editable="true" />
            </center>
            <table cellpadding="0" >
              <tr>
                <td width="480" class="vpadding20"></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="480"><table cellpadding="0" id="invitationType">
              <tr>
                <td><span>
                  <singleline editable="true" label="Fx Afskedsreception, Gæsteforelæsning osv.">Invitationstype</singleline>
                  </span></td>
              </tr>
            </table>
            <table cellpadding="0" >
              <tr>
                <td width="480" class="vpadding20"></td>
              </tr>
            </table>
            <table cellpadding="0" >
              <tr>
                <td class="hpadding20"></td>
                <td width="460"><span id="invitationDescription">
                  <multiline label="Hvad kommer der til at ske? Hvem kommer? Hvornår foregår det=? Benyt dig evt. af fed skrift til at fremhæve personer, tider mm.">Beskriv kort arrangementet</multiline>
                  </span></td>
                <td class="hpadding20"></td>
              </tr>
            </table>
            <table cellpadding="0" >
              <tr>
                <td width="480" class="vpadding20"></td>
              </tr>
            </table></td>
        </tr>
      </table>
      <table cellpadding="0" width="480" align="center" id="contentWrapper">
        <tr>
          <td colspan="3" class="vpadding15"></td>
        </tr>
        <tr>
          <td class="hpadding20"></td>
          <td id="contentText" width="460"><p class="noPad">
              <multiline label="Uddyb arrangementet. Her kan du skrive ligeså meget du har lyst til">Uddyb arrangementet</multiline>
            </p></td>
          <td class="hpadding20"></td>
        </tr>
        <tr>
          <td colspan="3" class="vpadding15"></td>
        </tr>
      </table>
      <table cellpadding="0" width="480" align="center" id="informationWrapper">
        <tr>
          <td class="vpadding20"></td>
        </tr>
        <tr>
          <td width="480"><table cellpadding="0" width="460" id="informationArea">
              <tr>
                <td class="topAlign" width="460" colspan="2"><span class="informationTitle">Information</span></td>
              </tr>
              <tr>
                <td class="topAlign" width="230"><span class="informationUndertitle">Sted</span><br />
                  <p><span class="informationContent">
                    <multiline class="informationContent" label="Her skrives information om hvor arrangementet finder sted">Skriv hvor arrangementet finder sted</multiline>
                    </span></p></td>
                <td class="topAlign" width="230"><span class="informationUndertitle">Tid</span><br />
                  <p><span class="informationContent">
                    <multiline label="Skriv hvornår arrangementet finder sted">Mandag, den 23. august 2011, 16:00 - 18:00</multiline>
                    </span></p></td>
              </tr>
              <tr>
                <td width="460" colspan="2"><span class="informationUndertitle">Tilmelding</span><br />
                  <p><span class="informationContent">
                    <multiline editable="true" label="Skriv hvordan man tilmelder sig">Det er begrænset antal sæder. Tilmeld dig nu ved at...</multiline>
                    </span></p></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td class="vpadding20"></td>
        </tr>
      </table>
      <table cellpadding="0" align="center" id="Spacy">
        <tr>
          <td width="480" class="vpadding15"></td>
        </tr>
      </table>
      <table cellpadding="0" width="500" id="footer">
        <tr>
          <td colspan="4" width="500" class="vpadding20"></td>
        </tr>
        <tr>
          <td class="hpadding20"></td>
          <td width="480"><table cellpadding="0" width="350" class="footerContentLeft">
              <tr>
                <td class="topAlign" width="350"><p class="noPad">You're receiving this because you subscribed from our webpage</p></td>
              </tr>
              <tr>
                <td class="topAlign" width="350"><p class="noPad">
                    <preferences>Edit your subscription</preferences>
                    |
                    <unsubscribe>Unsubscribe instantly</unsubscribe>
                  </p></td>
              </tr>
            </table></td>
          <td><table cellpadding="0" width="140" class="footerContentRight">
              <tr>
                <td class="topAlign" width="140"><p class="noPad">Copenhagen Business School<br />
                    Solbjerg Plads 3<br />
                    2000 Frederiksberg</p></td>
              </tr>
            </table></td>
          <td class="hpadding20"></td>
        </tr>
        <tr>
          <td colspan="4" width="500" class="vpadding20"></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

All the best!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vix, 4 years ago

I see I never got to say thanks. But thank you very much, it works perfectly.

I only have one problem, which is that when users click to edit "invitationDescription" the system adds more space around the area. I tried to put <p></p> around and add class="noPad", but it still adds the extra space. Have you got any idea to a solution?

roshodgekiss roshodgekiss, 4 years ago

You're welcome, Vix - glad it worked out well :)

As <multiline> automatically adds <p> tags to your code, my first idea would be to remove all margins and padding from <p> tags in #invitationDescription like so:

#invitationDescription p { margin: 0; padding: 0; }

With luck, that will remove any extra spaces. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vix, 4 years ago

Doesn't help either. I've tried to set margin and padding to 0 inside the multiline, and the result is the same.

roshodgekiss roshodgekiss, 4 years ago

Sorry Vix, I just tested this out and found a solution - either manually remove the <p> tags from the <multiline> editor's 'source' view, or add the following CSS to your styles:

span#invitationDescription p { margin: 0; padding: 0; }

I assume the code hasn't changed from the sample I posted 3 weeks ago - if it hasn't, then the above should work :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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