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, 5 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, 5 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, 5 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, 5 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, 5 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, 5 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, 5 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free