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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Why do images mess up the template background?

    Hi,

    I'm trying to put together a newsletter but whenever I put any images in my table it pushes the background image 'down' a bit, leaving a bit of white space. Take the images out and everything is fine.

    In case someone is able to help this is the code in the body:

    Code:
    <p>
    	&nbsp;</p>
    <table align:="" border="0" left="" style="width: 492px;">
    	<tbody>
    			<tr>
    			<td style="text-align: center;">
    				<a href="http://www.handcrafteduk.com/ethnicgiftssaltlamps-c-3_102.html"><img alt="Salt Lamps" border="0" height="160" src="http://www.handcrafteduk.com/bmz_cache/5/5e242339420c360373770896aab9dc72.image.160x160.jpg" style="border-style: solid; border-width: 0pt;" width="160" /></a></td>
    			<td style="text-align: center;">
    				<a href="http://www.handcrafteduk.com/ethnicgiftsrussiandolls-c-3_14.html"><img alt="Russian Dolls" border="0" height="143" src="http://www.handcrafteduk.com/bmz_cache/d/d0cdbad4db7063f31d9f196e8484b7c8.image.184x160.jpg" style="border-style: solid; border-width: 0pt;" width="164" /></a></td>
    			<td style="text-align: center;">
    				<a href="http://www.handcrafteduk.com/ethnicgiftsdreamcatchers-c-3_61.html?page=1&sort=4a"><img alt="Dream Catchers" border="0" height="160" src="http://www.handcrafteduk.com/bmz_cache/1/153382012d9bd7bd8dc63f86f2387399.image.133x160.JPG" style="border-style: solid; border-width: 0pt;" width="133" /></a></td>
    		</tr>
    		<tr>
    			<td style="text-align: center;">
    				<span style="font-size: 12px;"><a href="http://www.handcrafteduk.com/ethnicgiftssaltlamps-c-3_102.html">Salt Lamps</a></span></td>
    			<td style="text-align: center;">
    				<span style="font-size: 12px;"><a href="http://www.handcrafteduk.com/ethnicgiftsrussiandolls-c-3_14.html">Russian Dolls</a></span></td>
    			<td style="text-align: center;">
    				<span style="font-size: 12px;"><a href="http://www.handcrafteduk.com/ethnicgiftsdreamcatchers-c-3_61.html?page=1&sort=4a">Dream Catchers</a></span></td>
    		</tr>
    		<tr>
    			<td style="vertical-align: top;">
    				&nbsp;</td>
    			<td style="vertical-align: top;">
    				&nbsp;</td>
    			<td style="vertical-align: top;">
    				&nbsp;</td>
    		</tr>
    	</tbody>
    </table>
    In case it helps, this is the template code (that I'm trying to insert the table on to).

    Code:
    <html> 
        <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            
        <style type="text/css">
    	/*
    	@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-image:url(http://www.handcrafteduk.com//blog/wp-content/themes/nature_wdl/images/bgr_html.png);
    			/*@editable*/repeat-x:repeat-y;
    			/*@editable*/background-position:left;
    		}
    	/*
    	@tab Header
    	@section preheader
    	@tip You can make this color stand out, or you might make it the same as your email's background color.
    	@theme header
    	*/
    		#preheader{
    			/*@editable*/background-color:#F0F0F0;
    			/*@editable*/color:#505050;
    			/*@editable*/font-family:Verdana;
    			/*@editable*/font-size:10px;
    			/*@editable*/line-height:200%;
    			/*@editable*/text-align:right;
    			/*@editable*/text-decoration:none;
    		}
    	/*
    	@tab Header
    	@section preheader links
    	@tip Specify a color for your header hyperlinks.
    	@theme link_preheader
    	*/
    		#preheader a{
    			/*@editable*/color:#660000;
    			/*@editable*/font-style:normal;
    			/*@editable*/font-weight:normal;
    			/*@editable*/text-decoration:underline;
    		}
    	/*
    	@tab Header
    	@section header bar text
    	@tip Customize the way your text header looks if you do not use a graphic header.
    	*/
    		#header{
    			/*@editable*/background-color:#FFFFFF;
    			/*@editable*/color:#202020;
    			/*@editable*/font-family:Verdana;
    			/*@editable*/font-size:30px;
    			/*@editable*/font-weight:normal;
    			/*@editable*/padding:0;
    			/*@editable*/text-align:left;
    		}
    	/*
    	@tab Body
    	@section content
    	@tip This is the default text style for the body of your email.
    	@theme main
    	*/
    		#main{
    			/*@editable*/background-color:#FFFFFF;
    			/*@editable*/border-top:0px none #FFFFFF;
    			/*@editable*/border-bottom:0px none #FFFFFF;
    			/*@editable*/color:#202020;
    			/*@editable*/font-family:Verdana;
    			/*@editable*/font-size:12px;
    			/*@editable*/line-height:150%;
    		}
    	/*
    	@tab Body
    	@section title style
    	@tip Titles and headlines in your message body. Make them big and easy to read.
    	@theme title
    	*/
    		.title{
    			/*@editable*/color:#660000;
    			/*@editable*/font-family:Arial;
    			/*@editable*/font-size:18px;
    			/*@editable*/font-style:normal;
    			/*@editable*/font-weight:bold;
    			/*@editable*/line-height:100%;
    		}
    	/*
    	@tab Body
    	@section subtitle style
    	@tip This is the byline text that appears immediately underneath your titles/headlines.
    	@theme subtitle
    	*/
    		.subtitle{
    			/*@editable*/color:#006400;
    			/*@editable*/font-family:Arial;
    			/*@editable*/font-size:16px;
    			/*@editable*/font-style:normal;
    			/*@editable*/font-weight:bold;
    			/*@editable*/line-height:100%;
    		}
    	/*
    	@tab Body
    	@section link style
    	@tip Specify a color for all your hyperlinks.
    	@theme link_body
    	*/
    		.main a,.main a:link,.main a:visited{
    			/*@editable*/color:#0000ff;
    			/*@editable*/font-style:normal;
    			/*@editable*/font-weight:normal;
    			/*@editable*/text-decoration:underline;
    		}
    	/*
    	@tab Body
    	@section button style
    	@tip You may want to boldly style your buttons so that they stand out from your content.
    	@theme subtitle
    	*/
    		#button{
    			/*@tab Body
    @section button style
    @tip You may want to boldly style your buttons so that they stand out from your content.
    @theme subtitle*/border-radius:5px;
    			/*@tab Body
    @section button style
    @tip You may want to boldly style your buttons so that they stand out from your content.
    @theme subtitle*/-moz-border-radius:5px;
    			/*@tab Body
    @section button style
    @tip You may want to boldly style your buttons so that they stand out from your content.
    @theme subtitle*/-webkit-border-radius:5px;
    			/*@editable*/background-color:#660000;
    			/*@editable*/color:#FFFFFF;
    			/*@editable*/display:block;
    			/*@editable*/font-family:Arial;
    			/*@editable*/font-size:16px;
    			/*@editable*/font-style:normal;
    			/*@editable*/font-weight:bold;
    			/*@editable*/line-height:100%;
    			/*@editable*/margin:15px auto;
    			/*@editable*/padding:15px 10px;
    			/*@editable*/text-align:center;
    			/*@editable*/text-decoration:none;
    			/*@editable*/width:25%;
    		}
    	/*
    	@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:#CCCCCC;
    			/*@editable*/border-top:0px none #000000;
    			/*@editable*/border-bottom:40px solid #AAAAAA;
    			/*@editable*/color:#202020;
    			/*@editable*/font-family:Verdana;
    			/*@editable*/font-size:10px;
    			/*@editable*/line-height:150%;
    		}
    	/*
    	@tab Footer
    	@section footer links
    	@tip Specify a color for your footer hyperlinks.
    	@theme link_footer
    	*/
    		#footer a{
    			/*@editable*/color:#505050;
    			/*@editable*/font-weight:normal;
    			/*@editable*/text-decoration:underline;
    		}
    </style></head>
        <body>
            <center>
                <table width="600" border="0" cellspacing="0" cellpadding="0" id="">
                    <tr>
    	                <td>
        		            <table width="600" cellpadding="20" cellspacing="0" id="">
    			                <tr>
    				                <td align="left" valign="top" id="preheader" mc:edit="preheader">
    					                <!-- *|IFNOT:ARCHIVE_PAGE|* --><p>Email not displaying correctly? <a href="*|ARCHIVE|*">View it in your browser.</a></p><!-- *|END:IF|* -->
    				                </td>
                    			</tr>
                    		</table>
                    	</td>
                    </tr>
                    <tr>
                    	<td id="header" align="left" valign="top">
                    		<img mc:edit="header_image" style="max-width: 600px; display:block;" mc:allowdesigner mc:allowtext src="http://gallery.mailchimp.com/abe7769350ea03c8fadb931e9/images/bgr_header.1.jpg">
                    	</td>
                    </tr>
                    <tr>
                    	<td>
                    		<table width="600" cellpadding="40" cellspacing="0" id="">
                    			<tr>
                                    <td align="left" valign="top" id="main" class="main" mc:edit="main">
    									<p><span class="title">Changes to the *|LIST:COMPANY|* mailing list</span></p>
    									<p><span class="subtitle">Important changes are coming!</span></p>
    									<p>Hi! This is [your name] from *|LIST:COMPANY|*. You might know us from [explain how people know you], and you signed up for our list via [explain how people signed up for your list].</p>
    									<p>We love keeping you posted about interesting and important [news, updates, offers, sales, products, etc.]. We’re not changing the frequency or content of our communications, but we want to let you know that we recently switched email providers.</p>
    									<p>We know you get lots of email, so we’d like to use this switch as an opportunity to make sure you want to stay on our list. If you’re no longer interested, you can <a href="*|UNSUB|*">unsubscribe</a> by clicking the button below. Otherwise, do nothing, and look forward to more great [news, updates, offers, sales, products, etc.]!</p>
    									<a id="button" href="*|UNSUB|*">Unsubscribe</a>
    									<p>[Say thanks for being a customer, subscriber, fan]</p>
    									<p>Cheers, <br>*|LIST:COMPANY|*</p> 
                                    </td>
    			                </tr>
                		    </table>
    	                </td>
                    </tr>
                    <tr>
    	                <td>
    		                <table width="600" cellpadding="20" cellspacing="0" id="">
            			        <tr>
             				       <td align="left" valign="top" id="footer" mc:edit="footer">
                                        <p>*|IFNOT:ARCHIVE_PAGE|* <a href="*|ARCHIVE|*" title="View email in your browser.">View email in your browser</a> | *|END:IF|* <a href="*|UNSUB|*">Unsubscribe</a> | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend</a></p>
                                        <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved. *|IFNOT:ARCHIVE_PAGE|* <br>*|LIST:DESCRIPTION|*<br>*|HTML:LIST_ADDRESS_HTML|* *|END:IF|*</p>
    				               </td>
                    			</tr>
                    		</table>
                    	</td>
                    </tr>
                </table>
            </center>
    		<span style="padding: 0px;"></span>
        </body> 
    </html>
    Any ideas what the problem is?

    Would really appreciate any help,

    Gary

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But your actual code does not have a background image, or am I blind?

    If you consider the CSS code below, I understand that styling is not allowed by most e-mail html browsers, so you'd better put any styling in-line in your tables, like:
    <td bgcolor="#292A34" style="border-bottom: #727379 1px solid;">

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should mention the td height as per your image size


  •  

    Posting Permissions

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