background colour not showing in yahoo

Hi all,

This is my very first post here, so hello!

Using one of the templates from CM, I've creating a newsletter.  I'm happy with my CSS, but for some reason when I send my test email and preview in Yahoo, the background colour specified in the CSS is not showing.  It shows in my work email client and Hotmail, so I'm a bit stumped.

Any ideas?

Many thanks,

KM

Diana Diana, 7 years ago

Hey KM,

Welcome to the forums!

Could you post your code? Makes it easier to take a look :).


~*~~*~~*~~*~
D. Potter
Campaign Monitor
karmabutterfly, 7 years ago

Hi Diana,

Thanks for your help.  I'm not sure if you want the code for the whole thing, but I've posted it anyway just in case...

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>***************</title>
   <style type="text/css" media="screen">


      body {
        background-color: #4ea6b9;
        margin: 0;
        padding: 0;
      }

      a:link {
  text-decoration: none;
  color: #003b78;
}
a:visited {
  text-decoration: none;
  color: #003575;
}
a:hover {
  text-decoration: none;

}
a:active {
  text-decoration: none;
}

     td.permission {
        padding: 8px 0 8px 0;
      }



      td.permission p {
        font-family: Arial;
        font-size: 10px;
        font-weight: normal;
        color: #151515;
        text-align: center;
      }


      table.bgTop {
        background-color: #ffffff;
      }

      table.bg {
        background-color: #ffffff;
      }

      table.header td {
        height: 108px;
        border-bottom: 1px solid #cdb975;

      }

      td.mainbar {
         padding: 20px;
      }

      td.mainbar h2 {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        color: #cadb2a;
        margin: 0 0 10px 0;
        padding: 0;
      }


      td.mainbar h3 {
        font-family: Arial;
        font-size: 18px;
        font-weight: normal;
        color: #6b427c;
        text-transform: uppercase;
        margin: 0 0 8px 0;
        padding: 0;
      }

      td.mainbar h4 {
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #4ea6b9;
        margin: 0 0 8px 0;
        padding: 0;
      }


      td.mainbar p {
        font-family: Arial;
        font-size: 12px;
        font-weight: normal;
        color: #333333;
        margin: 0 0 16px 0;
        padding: 0;
      }


      td.footer {
         padding: 0 20px 0 20px;
         background-repeat: no-repeat;
         background-position: top center;
         background-color: #dd5928;
         height: 61px;
         vertical-align: middle;
      }

      td.footer p {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #ffffff;
         line-height: 16px;
         margin: 0;
         padding: 0;
      }

      table.bgBottom {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #ffffff;
         line-height: 16px;
         margin: 0;
         padding: 0;
        background-color: #dd5928;
      }

      table.reminder {
            font-family: Arial;
            font-size: 12px;
            font weight: bold;
            background-color: #ffffff;
            color:#dd5928;
            margin-left: 0px;
            padding: 20px;
       }

   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">

         <table width="579" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td class="permission">
                  <p>Having trouble reading this email? <webversion>View it on your browser</webversion>. </p>
               </td>
            </tr>
         </table>

         <table width="579" border="0" cellspacing="0" cellpadding="0" class="bgTop">
            <tr>
               <td align="center">

                  <table width="579" height="108" border="0" cellspacing="0" cellpadding="0" class="header">
                     <tr>
                        <td><img src="http://www.housing.org.uk/email/getonboard/images/Fed_logo.jpg" alt="National Housing Federation" width="121" height="65" align="right" /></td>
                     </tr>

                  </table>

               </td>
            </tr>
         </table>

         <table width="579" border="0" cellspacing="0" cellpadding="0" class="bg">
            <tr>
               <td width="326" align="center" valign="top">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td align="left" class="mainbar">


                           <h3>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</h3>
                           <h2>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /><br />
                          <a href="http://www.joingetonboard.org.uk/">www.joingetonboard.org.uk</a>, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

                          <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt <strong><a href="http://www.joingetonboard.org.uk/">www.joingetonboard.org.uk</a></strong> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

                        </td>
                     </tr>


<table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td align="left" class="mainbar">

                     </tr>

               </td>
                </table>

               <td width="254" align="center" valign="middle" class="sidebar">

                  <table width="100%" border="0" cellspacing="0" cellpadding="0">

                              <img src="http://images/Far-sightedwoman.jpg">



                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>

              <table width="579" border="0" cellspacing="0" cellpadding="0" class="reminder">

              <td align="left" colspan="2">

              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum etc.</p>

              </td></table>

         <table width="579" height="108" border="0" class="bgBottom">
            <tr>
               <td align="center" valign="middle">

                                       <td align="center"><p><forwardtoafriend>Forward this email</forwardtoafriend> to a friend<br />
This email was delivered to you on behalf of Cicero in 45 BC <br />
                  No longer interested in receiving emails from us?  <unsubscribe>Unsubscribe here </unsubscribe>
                  <br />&copy; NHF 2009  <br /><br />
                  <p><img src="images/inzlogo.gif" alt="inlogo" width="207" height="29" /></p></td>
                     </tr>
                  </table>

               </td>
            </tr>
         </table>

      </td>
   </tr>
</table>

</body>
</html>

Thanks in advance,

KM  =)

rmills, 7 years ago

Another minus for styles in the head tags. 

Just put bgcolor="#4ea6b9" on the body tag and your top 100% width table...

Thanks,
Rich

karmabutterfly, 7 years ago

Hi Richard,

Many thanks for your answer.  I'm still a relative novice in web design, basically picking stuff up as I go, so your expert help is appreciated.  Should I also be taking out the bgcolor from the head tag, or leave as is?

I'll report back soon with the results.

Cheers muchly,

KM  =)

karmabutterfly, 7 years ago

The colour still isn't showing up.  I've removed the bgcolor from the head tag and have it as you suggested, but no luck... Any idea why?

Ty,

KM

rmills, 7 years ago

KM,

Are you sure you have put it in the correct place as I sent a test and it worked for me.

Paste your code and I will have a look...

Thanks,
Rich

karmabutterfly, 7 years ago

Rich, you're so kind.

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Sign up to Get on Board - National Housing Federation</title>
   <style type="text/css" media="screen">


      body {
        margin: 0;
        padding: 0;
      }

      a:link {
  text-decoration: none;
  color: #003b78;
}
a:visited {
  text-decoration: none;
  color: #003575;
}
a:hover {
  text-decoration: none;

}
a:active {
  text-decoration: none;
}

     td.permission {
        padding: 8px 0 8px 0;
      }



      td.permission p {
        font-family: Arial;
        font-size: 10px;
        font-weight: normal;
        color: #151515;
        text-align: center;
      }


      table.bgTop {
        background-color: #ffffff;
      }

      table.bg {
        background-color: #ffffff;
      }

      table.header td {
        height: 108px;
        border-bottom: 1px solid #cdb975;

      }

      td.mainbar {
         padding: 20px;
      }

      td.mainbar h2 {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        color: #cadb2a;
        margin: 0 0 10px 0;
        padding: 0;
      }


      td.mainbar h3 {
        font-family: Arial;
        font-size: 18px;
        font-weight: normal;
        color: #6b427c;
        text-transform: uppercase;
        margin: 0 0 8px 0;
        padding: 0;
      }

      td.mainbar h4 {
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #4ea6b9;
        margin: 0 0 8px 0;
        padding: 0;
      }


      td.mainbar p {
        font-family: Arial;
        font-size: 12px;
        font-weight: normal;
        color: #333333;
        margin: 0 0 16px 0;
        padding: 0;
      }


      td.footer {
         padding: 0 20px 0 20px;
         background-repeat: no-repeat;
         background-position: top center;
         background-color: #dd5928;
         height: 61px;
         vertical-align: middle;
      }

      td.footer p {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #ffffff;
         line-height: 16px;
         margin: 0;
         padding: 0;
      }

      table.bgBottom {
         font-family: Arial;
         font-size: 11px;
         font-weight: normal;
         color: #ffffff;
         line-height: 16px;
         margin: 0;
         padding: 0;
        background-color: #dd5928;
      }

      table.reminder {
            font-family: Arial;
            font-size: 12px;
            font weight: bold;
            background-color: #ffffff;
            color:#dd5928;
            margin-left: 0px;
            padding: 20px;
       }

   </style>
</head>
<body bgcolor="#4ea6b9">

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#4ea6b9">
   <tr>
      <td align="center">

         <table width="579" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td class="permission">
                  <p>Having trouble reading this email? <webversion>View it on your browser</webversion>. </p>
               </td>
            </tr>
         </table>

         <table width="579" border="0" cellspacing="0" cellpadding="0" class="bgTop">
            <tr>
               <td align="center">

                  <table width="579" height="108" border="0" cellspacing="0" cellpadding="0" class="header">
                     <tr>
                        <td><img src=" width="121" height="65" align="right" /></td>
                     </tr>

                  </table>

               </td>
            </tr>
         </table>

         <table width="579" border="0" cellspacing="0" cellpadding="0" class="bg">
            <tr>
               <td width="326" align="center" valign="top">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td align="left" class="mainbar">


                           
                        </td>
                     </tr>


<table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td align="left" class="mainbar">

                     </tr>

               </td>
                </table>

               <td width="254" align="center" valign="middle" class="sidebar">

                  <table width="100%" border="0" cellspacing="0" cellpadding="0">

                              <img src="http://www.housing.org.uk">



                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>

              <table width="579" border="0" cellspacing="0" cellpadding="0" class="reminder">

              <td align="left" colspan="2">

              <p>etc.</p>

              </td></table>

         <table width="579" height="108" border="0" class="bgBottom">
            <tr>
               <td align="center" valign="middle">

                                       <td align="center"><p><forwardtoafriend>Forward this email</forwardtoafriend> to a friend<br />
<br />
                  No longer interested in receiving emails from us?  <unsubscribe>Unsubscribe here </unsubscribe>
                  <br />&copy;  2009  <br /><br />
                  <p><img src= width="207" height="29" /></p></td>
                     </tr>
                  </table>

               </td>
            </tr>
         </table>

      </td>
   </tr>
</table>

</body>
</html>

rmills, 7 years ago

Hi KM,

Sorry it's taken me a long time to reply, been busy and away.

I have had a look and sent another test using your code above, and I have the backgrounds showing.

I'm not sure why it's not working on your PC, maybe it's one of your setting on the browser???

Have you tried from another PC?

Thanks,
Rich

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