Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Css problem - creating spaces not specified in code. tried almost everything

    Hi there,

    someone please help me... i am pulling my hair out! hahah
    so i am trying to custom code an email template for use in mailchimp - however it looks okay in design preview in dreamweaver but when i preview in firefox or take it into mailchimp there are extra spaces above and below the images not specified in the code. Please help../. urgent job!

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sample Email Template From MailChimp</title>
    <style type="text/css" media="screen">
    /**
    * @tab Page
    * @section background color
    * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
    * @theme page
    */
    body {
    /*@editable*/ background-color: #ffe4a8;
    text-align:center;
    }

    /**
    * @tab Page
    * @section border
    * @tip Add a border to help your template content stand out from your email's background.
    */
    #layout {
    /*@editable*/ border: 0px solid #999999;
    /*@editable*/ background:#ffffff;
    text-align:left;
    height: auto;
    width: 780px;

    }
    /**
    * @tab Header
    * @section header bar
    * @tip Choose a set of colors that look good with the colors of your logo image or text header.
    */
    #header {
    /*@editable*/ background-color: #FFE4A8;
    /*@editable*/ border-top: 0px none #333333;
    /*@editable*/ border-bottom: 0px none #ffffff;
    /*@editable*/ padding: 0px;
    /*@editable*/ color: #333333;
    /*@editable*/ font-size: 30px;
    /*@editable*/ font-family: Georgia;
    /*@editable*/ font-weight: normal;
    /*@editable*/ text-align: left;
    margin: 0px;
    height: 156px;
    width: 780px;
    }

    /**
    * @tab Body
    * @section default text
    * @tip This is the default text style for the body of your email.
    * @theme content
    */
    #content {
    /*@editable*/ font-size: 13px;
    /*@editable*/ color: #333333;
    /*@editable*/ font-style: normal;
    /*@editable*/ font-weight: normal;
    /*@editable*/ font-family: Helvetica;
    /*@editable*/ line-height: 1.25em;
    text-align: justify;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    }

    /**
    * @tab Body
    * @section title style
    * @tip Titles and headlines in your message body. Make them big and easy to read.
    * @theme title
    */
    .primary-heading {
    /*@editable*/ font-size: 28px;
    /*@editable*/ font-weight: bold;
    /*@editable*/ color: #532e2a;
    /*@editable*/ font-family: Georgia;
    /*@editable*/ line-height: 150%;
    /*@editable*/ margin: 25px 0 0 0;
    }

    /**
    * @tab Body
    * @section subtitle style
    * @tip This is the byline text that appears immediately underneath your titles/headlines.
    * @theme subtitle
    */
    .secondary-heading {
    /*@editable*/ font-size: 20px;
    /*@editable*/ font-weight: bold;
    /*@editable*/ color: #000000;
    /*@editable*/ font-style: normal;
    /*@editable*/ font-family: Georgia;
    /*@editable*/ margin: 25px 0 5px 0;
    text-align: justify;
    }

    /**
    * @tab Footer
    * @section footer
    * @tip You might give your footer a light background color and separate it with a top border
    * @theme footer
    */
    #footer {
    /*@editable*/ background-color: #FFE4A8;
    /*@editable*/ border-top: 0px none #ffffff;
    /*@editable*/ padding: 0px;
    /*@editable*/ font-size: 10px;
    /*@editable*/ color: #333333;
    /*@editable*/ line-height: 100%;
    /*@editable*/ font-family: Verdana;
    }

    /**
    * @tab Footer
    * @section link style
    * @tip Specify a color for your footer hyperlinks.
    * @theme link_footer
    */
    #footer a {
    /*@editable*/ text-decoration: underline;
    /*@editable*/ font-weight: normal;
    }

    /**
    * @tab Page
    * @section link style
    * @tip Specify a color for all the hyperlinks in your email.
    * @theme link
    */
    a, a:link, a:visited {
    /*@editable*/ color: #800000;
    /*@editable*/ text-decoration: underline;
    /*@editable*/ font-weight: normal;
    }
    a:link {
    color: #EE770F;
    }
    a:visited {
    color: #C91C00;
    }
    a:active {
    color: #EE770F;
    }
    </style>
    </head>
    <body> <center>
    <table id="layout"mc:edit="layout: border="0" cellspacing="0" cellpadding="0" width="780">
    <tr>
    <td id="header" mc:edit="header" width="780" height="156">

    <!-- NOTE: This image would trigger the display of a placeholder block with edit links when shown in the MailChimp editor interface -->
    <img src="http://www.soltoro.com/mailing/images/solheader.jpg" alt="" width="780" height="129" />
    <img src="http://www.soltoro.com/mailing/images/soltitle.jpg" alt="" width="524" height="27" /><img src="http://www.soltoro.com/mailing/images/solhome.jpg" alt="" width="86" height="27" /><img src="http://www.soltoro.com/mailing/images/solprojects.jpg" alt="" width="101" height="27" /><img src="http://www.soltoro.com/mailing/images/sol-news.jpg" alt="" width="69" height="27" />

    </td>
    </tr>

    <tr>
    <td id="content" mc:edit="content">
    <h1 class="primary-heading">Primary Heading</h1>
    <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>

    <h2 class="secondary-heading">Secondary Heading</h2>
    <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br />
    </p>
    </td>
    </tr>

    <tr>
    <td id="footer" mc:edit="footer">
    <p align="center"> <img src="http://www.soltoro.com/mailing/images/footer.jpg" alt="" width="780" height="28" />

    <a href="*|ARCHIVE|*" class="adminText"><br />
    <br />
    view email in browser</a> | <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend </a></p>
    <p align="center">Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.<br />
    </p>
    </td>
    </tr>
    </table></center>
    </body>
    </html>
    [CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    This is arising from the use of a strict doctype and images in tables, I think.

    <img> is an inline element and hence the browser needs to allow space at the bottom for the "tails" of any text (g/j/y etc). In order to fix this add

    Code:
    img{display:block}
    to your css. We're not out of the wood however, because then all the images stacked up in your menu take up a separate line each. Easiest solution for this is to float all these images, something like:

    Code:
    <img class="float" src="http://www.soltoro.com/mailing/images/soltitle.jpg" alt="" width="524" height="27" />
    <img class="float" src="http://www.soltoro.com/mailing/images/solhome.jpg" alt="" width="86" height="27" />
    <img class="float" src="http://www.soltoro.com/mailing/images/solprojects.jpg" alt="" width="101" height="27" />
    <img class="float" src="http://www.soltoro.com/mailing/images/sol-news.jpg" alt="" width="69" height="27" />
    and in your css

    Code:
    img.float{float:left}
    .

    No reason to use a table here, incidentally....

    PS: It helps if you wrap your code in code tags (the little hash symbol on the menu)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahhh thank you so much! it totally fixed the problem!!!!

    what do you mean by "No reason to use a table here, incidentally....

    PS: It helps if you wrap your code in code tags (the little hash symbol on the menu) "

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    what do you mean by "No reason to use a table here, incidentally....

    PS: It helps if you wrap your code in code tags (the little hash symbol on the menu) "
    There's no reason to use a table for layout.

    The code tag thing - if you use the hash symbol to wrap the code in your posts here scroll bars are automatically added which make your posts easier to read.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •