Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Timo Bontenbal
Timo Bontenbal
9,582 Points

HTML 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
James Barnett
39,199 Points

Maybe 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
Zack Taylor
9,021 Points

Personally 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.