...

View Full Version : Why do images mess up the template background?



handcrafteduk
02-25-2011, 05:07 PM
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:


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


<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 :)

rudberg
04-24-2011, 08:55 AM
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;">

johnktaylor
04-25-2011, 09:17 AM
You should mention the td height as per your image size



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum