Leopard Mac Mail image padding

I have been finding that templates that worked perfectly in Mac Mail for OSX Tiger are being pushed out by what appears to be padding in Mac Mail for OSX Leopard.  Has anyone else experienced this? 

I have tried moving the image (which spans the full width of the content area) to a separate div, with no luck.  Theoretically, there should be no styles affecting it, so I'm wondering: is Mac Mail Leopard to blame, or does my code suck?

mbowzeylo mbowzeylo, 8 years ago

Hummm... I actually just finished testing two designs today. Both designs include images that span the full width of the design. For me they looked the same in both Mac Mail on my Leopard machine and Mac Mail on my Tiger machine. I did not see any additional padding or margin. Do you have any example.

nichestudio, 8 years ago

sure -- this is the newsletter totally stripped down to minimal styles, and it still does it.  basically, it seems to pad out the image from the left about 2px, which pushes out the right side of the template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css" media="screen">
    /* common
    body {
        margin: 20px 0 0;
        padding: 0px;
        color: #b5b5b5; 
        background: #0096cd;
        font-family: Verdana, Helvetica,Arial, sans-serif;
    * #HeadContainer {

        color: #666;
        background: #fff;
        width: 600px;
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
        padding: 0px;

    The asterisks preceding every selector ensure styles are rendered in Dot Mac.
    The inline styles in headlines are for Outlook 2007.
<base href="http://www.asc.asn.au" />

<div id="HeadContainer">
    <table border="0" cellspacing="0" cellpadding="0" width="600">
                    <tr valign="top">
                        <td><img src="http://www.asc.asn.au/images/newsletter/newshead.jpg" alt="" border="0"/></td>
                            <h1 style="padding-left: 25px; padding-top: 10px; margin: 0px; color: #0096cd; font-weight: normal;">Title here</h1>
                            <p style="padding-left: 25px; padding-top: 10px; margin-top: 5px; margin-bottom: 10px; color: #90cf2b;">Test here</p>

                            <h6 style="padding-left: 25px; padding-top: 10px; margin-top: 5px; margin-bottom: 10px; color: #ff9b00; font-size: 16px; font-weight: normal;">[DATE]</h6>


thanks for your help.

mbowzeylo mbowzeylo, 8 years ago

Ok... I hope you don't mind... I took your code verbatim and created a new test campaign that I sent to myself. I opened it up in Mac Mail on my laptop which is running Leopard. Everything looks good. I do not see any extra padding around the image. I have attached a screen shot for you to see. Do you have some custom settings in your Mac Mail within the local app that could be causing this?


After looking at your code, if you are concerned about the div, I don't really see a need for it since you are designing with tables anyway. You could declare all those properties on the <table> tag and use a <center> tag around the entire table to get it centered in the window. This would achieve the same end result. This is just my opinion though... I'm sure there are several other ways as well.

Hope this helps.

nichestudio, 8 years ago

Hey, thanks -- good to know. I'll have a poke around my preferences etc and see what might be going on. 

Thanks again for your advice + help, very much appreciated :)

kiwigray, 8 years ago

Can I ask a silly question. The answer is probably here some where but perhaps a friendly person will help an aged user.

Having downloaded the templates how do you get them in Mail in Leopard, so they can be used. There has to be a trick.

chrisabad chrisabad, 8 years ago

I think what we're talking about here is taking email templates for CM, sending them out, then reading them in Leopard's Mail. Not necessarily loading these templates into Leopard's Mail as "stationary" and sending from there.

I'm sure its possible as its all basic HTML, but not really the topic of the forum. I would suggest trying Apple's support forums.

Integral Impressions provides innovative Internet marketing products and services. Here are a couple of our projects:

Nourish - Easily convert your blog articles into an automated newsletter.
Outlandish - A flexible platform for managing and deploying landing pages.
tennis, 8 years ago

Hey, I just got burned by similar.

I'm using Mac Tiger.

When I receive the emails, there is additional spacing/padding between any rows (I have html tables /anguish) that have graphics in them.  Yet if I forward the email, the image corrects itself and looks great in the 'forward' window.

It's a new template we're using from an outside design firm.

After much gnashing of teeth, I noted this line at the top:


I removed it and the template started working perfectly - no padding between table rows.

trandrus, 8 years ago
tennis :

After much gnashing of teeth, I noted this line at the top:


I removed it and the template started working perfectly - no padding between table rows.

The DOM structure is very different for HTML emails than for websites. Doctypes are meant to notify the browser how to render the HTML markup used in the document. Most email interpreters will strip out everything above the opening body tag and below the closing body tag, including CSS styles declared in the head of the document (Mac Mail is a particularly lenient email interpreter). Gmail will strip out CSS styles that aren't inline, even if you put it inside the body tag, and Hotmail will strip out the body tag entirely.

Why do they do this? Presumably to avoid having two sets of meta-data present in a document which could cause conflicting interpretations of the HTML (remember that for web-based email clients, HTML emails are actually contained inside the website DOM structure which already has a Doctype, styles, etc.). If web-based clients allowed general style declarations, your email CSS that looks like this:

#footer { font-size:8px; }

could conflict with an already-present style declaration in the parent document for the footer since the email style declaration happens further down in the markup. As long as the vast majority of users are on web-based email clients, this conflict will persist.

Forwarding a message will generally destroy the original HTML content (most interpreters will strip out a ton of the code, which is why "Forward to Friend" features are handled separately in email marketing). Most likely, when you clicked the "forward" button, Mac Mail stripped out the Doctype which caused it to render "correctly".

jjylha jjylha, 7 years ago

I don't have any DOCTYPE in my code.. just plain <html> tag and the code...

I'm getting space between the image and table cell with Apple Mail 3. Anybody have this figured out?

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free