Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Timo Bontenbal
9,582 PointsHTML Newsletter bug?
Hi,
Why does my HTML news letter have a strange bug?
The header image works and two table rows. But after that it brakes. All styles are lost.
My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sportmedia.fi | Kiitos kun liityit postituslistallemme</title>
<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// GENERAL STYLES //////*/
body{
background-color: #ffffff;
font-family: helvetica, arial, sans-serif;
color: #2b2b2b;
}
#contentTable{
border: 7px solid #13428a;
}
h1{
font-size: 22px;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
padding-left: 30px;
padding-top: 20px;
padding-right: 40px;
color: #2b2b2b;
}
a{
color: #13428a;
text-decoration: none;
}
#mainTextContainer{
clear:both;
}
#headerContainer{
background-color: #13428a;
}
#mainText, #firstMainText{
background-color: #ffffff;
border-bottom:7px;
border-style:solid;
border-color:#13428a;
}
#firstMainText{
background-color: #ffffff;
border-bottom:7px;
border-style:solid;
border-color:#13428a;
}
#firstMainText h1{
font-size: 48px;
text-align: center;
}
#mainText p{
line-height: 1.5;
font-size: 16px;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 40px;
color: #2b2b2b;
}
#firstMainText p{
line-height: 1.5;
font-size: 16px;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 40px;
color: #2b2b2b;
}
#julkaistu{
float: right;
padding-bottom: 0!important;
clear:both;
}
#julkaistu span{
font-weight: bold !important;
}
#footerTextContainer{
background-color: #2a2a2a;
}
#footerTextContainer td{
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 30px;
}
#footerTextContainer p{
color: #ffffff;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 1.5;
}
#footernotes{
margin-top:30px;
text-align:center;
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600px" id="contentTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN EMAIL -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600px" id="emailContainer">
<tr>
<td align="center" valign="top" id="headerContainer">
<!-- Header Goes Here -->
<a href="http://sportmedia.fi/" target="_blank" title="Kiitos kun liityit postituslistallemme"><img src="http://gallery.mailchimp.com/fa1f202c1d16e0ba9f0358527/images/header.2.jpg" width="600px" height="250" alt="Kiitos kun liityit postituslistallemme"></a>
</td>
</tr>
<tr>
<td align="center" valign="top" id="mainContentContainer">
<!-- Main Content Goes Here -->
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="mainTextContainer">
<tr>
<td align="left" valign="top" id="firstMainText">
<h1>Westerlundilla tiukat paikat valinnoissa</h1>
<p>Jääkiekkomaajoukkueen päävalmentaja Erkka Westerlund ei sitten nuku hyvin lähivuorokausina. Tänään saattaa tulla muutos pakkikalustoon, jos Kimmo Timosen jalka ei olekaan täysin kunnossa. Tähtipuolustaja ei halua lähteä osakuntoisena häpeilemään muiden sekaan... <a href="http://sportmedia.fi/2014/wallinheimo-sittenkin-tosi-mies/">Lue lisää</a></p>
<p id="julkaistu">Julkaistu: <span>05.02.2014</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="mainContentContainer">
<!-- Main Content Goes Here -->
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="mainTextContainer">
<tr>
<td align="left" valign="top" id="mainText">
<h1>Timo Koivisto: Hippos Ykköspaikat</h1>
<p>Nyky-Hippos on tulossa tietyiltä osin elinkaarensa päähän, jolloin Jyväskylän ja jyväskyläläisten pitäisi olla valmiina investoimaan Hippoksen alueeseen.
Apulaiskaupunginjohtaja Timo Koivisto pitää Hipposta loistavana alueena ja kaupungin ehdottomana ykköspaikkana, kun puhutaan liikkumisesta, urheilemisesta ja ihmisen hyvinvoinnin ylläpitämisestä...<a href="http://sportmedia.fi/2014/timo-koivisto-hippos-ykkospaikka/">Lue lisää</a></p>
<p id="julkaistu">Julkaistu: <span>19.01.2014</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="mainContentContainer">
<!-- Main Content Goes Here -->
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="mainTextContainer">
<tr>
<td align="left" valign="top" id="mainText">
<h1>Rauman Lukko ja takalukko Ryan Zapolski</h1>
<p>Risto Dufvan jengi oli juuri niin paha JYPiä vastaan kuin saattoi aavistaa. Hiukan väsyneempi JYP, jolta oli poissa raatajasentteri Mika Lahti, oli hyvä mittari.
RD, kuten jääkiekkoväki kutsuu Risto Dufvaa, myhäili ja silitti päälakeaan. Vuorokauden paremmin levännyt raumalaisjoukkue liikkui enemmän lentäen kuin luistimilla kiitäen. Torstaina se oli kellistänyt Kärpät kotonaan... <a href="http://sportmedia.fi/2014/rauman-lukko-ja-takalukko-ryan-zapolski/">Lue lisää</a></p>
<p id="julkaistu">Julkaistu: <span>16.02.2014</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="mainContentContainer">
<!-- Main Content Goes Here -->
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="mainTextContainer">
<tr>
<td align="left" valign="top" id="mainText">
<h1>Jyrki aho ripitti
</h1>
<p>Hirveä kohu nousi tuosta Ahon pitkittyneestä ripityksestä. Media tietty tuohtui, kun lehdet menevät kiinni aika aikaisin ja teeveelähetykset painavat illalla aina päälle, mutta muuten Aho teko oli ihan hyvä ja sopiva.Koko liigakiekkoiluhan on isoa sirkusta, näytelmää ja temppuilua, jolloin kaikki keinot ovat sallittuja. Päätekijät eli katsojat saivat, mitä tarvitsivat eli ottelun, josta maksoivat täyden hinnan... <a href="http://sportmedia.fi/2014/jyrki-aho-ripitti/">Lue lisää</a></p>
<p id="julkaistu">Julkaistu: <span>29.01.2014</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer">
<!-- Footer Goes Here -->
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="footerTextContainer">
<tr>
<td align="left" valign="top" width="300px" id="leftFooter">
<p>*|ABUSE_EMAIL|*</p>
</td>
<td align="right" valign="top" width="300px" id="rightFooter">
<p>*|DATE:|*</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="footernotes">
<table border="0" cellpadding="0" cellspacing="0" width="600px" id="footernotes">
<tr>
<td align="left" valign="top" id="footernotes">
<a href="*|UNSUB|*">Peruuttaa tilaus</a> *|EMAIL|* tästä postituslistasta.</br>
<p>*|LIST:COMPANY|* | *|LIST:ADDRESS|* | *|LIST:PHONE|* | *|LIST:EMAIL|*</p>
<p>*|REWARDS|*</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END EMAIL -->
</table>
</td>
</tr>
</table>
</table>
</center>
</body>
</html>
´´´´
2 Answers
James Barnett
39,199 PointsMaybe I'm missing something, however usually an HTML email client will strip out an internal stylesheet.
So perhaps run your CSS through an CSS inliner tool
Zack Taylor
9,021 PointsPersonally mate I would check to see if all your </table> </tr> </td> codes are fully closed off. This will propbably elimate alot of problems. If they does not help try a online program to identify the problem. w3c has an html validator and css. good luck m8.