...
PDA

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

conception
10-27-2009, 05:33 PM
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]
SB65
10-27-2009, 06:09 PM
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

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:

<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

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)
conception
10-27-2009, 06:17 PM
Ahhh thank you so much! it totally fixed the problem!!!! :thumbsup:

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) "
SB65
10-27-2009, 06:59 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum