Forum Moderators: open
First of all, on the doctype, I used XHTML transitional. But this doesn't matter because doctype is not displayed in the email.
I used two images in the entire email: one completely transparent spacer, used only to make the right-hand side of the template clickable, linked to the client's site. This transparent gif sits on top of the background image (which is admittedly very large--I just wanted to use a single wrap div to hold the content, and nest another div within that for the text).
My code looks like this:
<body> <!-- No styles here -->
<div id="wrap" <!-- id just for clarity, all styles are inline -->
style="width:742px; height: 1060px; margin: 0px auto; padding:0px; background-image: url(http://sitename/bg-image.jpg); background-repeat:no-repeat;">
<div id="sidebar" <!-- id just for clarity, all styles are inline -->
style="float:right; height:900px; width: 320px">
<a href="http://sitename.com"><img src="http://sitename/clear-spacer.gif" width="280" height="700" alt="" style="float:right; border: 0px;" /></a>
</div>
<div id="maintext" <!-- id just for clarity, all styles are inline -->
style="margin: 0px; padding: 300px 35px; width:320px; font-family:Tw Cen Mt, Arial, Helvetica, Sans-serif; font-size: 14px; line-height: 140%">
<p style="padding: 5px;">
Dear {Name},</p>
<p style="padding: 5px;">Several paragraphs go here, I have snipped them out for this forum...</p>
</div>
<br style="clear:both" /> <!-- this line break used to clear the above float to keep footer down below (in addition to clear:both being specified within the footer style itself) -->
<div id="footer" <!-- id just for clarity, all styles are inline -->
style="clear:both; text-align:center; width:296px; margin: -340px 259px 0px auto; padding:0px 50px; font-size:smaller;"><p style="padding: 5px; margin: 5px; line-height: normal; text-align: center;"> Footer text goes here, I deleted it for posting on this forum
</p>
</div>
</div>
</body>
I at first thought that the recipient email clients were just not showing the remotely hosted background image, or maybe the free autoresponder wasn't set up for html emails...
but I had another marketer use his pro software to test the email and he also couldn't see the background image correctly... The clear gif works, and is linked to the site, as it should be. And the maintext div is narrow, and positioned on the left column as it should be. But the background is completely white. It is not visible at all.
Without being able to post a file, or URL, I am afraid no one will be able to help me, but I have included as much of the code as I thought was relevant, without just dumping the whole file.
Am I going to have to convert this page to a table-based email? I just don't feel like slicing the background image and using tables, when the divs look perfectly fine on my test-server.
Any help would be appreciated...
Thanks
[edited by: tedster at 6:42 pm (utc) on Feb. 29, 2008]
There's nothing particularly problematic in the code you offered that I can see. Maybe you could try testing with stripped down emails to isolate the problem area. Just keep removing elements and see how the email clients respond.
In general, I avoid anything but table-based layouts for email messages since there are so very many clients to test on, and each situation has its own quirks.
There's alot of good information in this thread from 2005 [webmasterworld.com]. That might seem like old information, but the situation hasn't chamge too much since then. Notice the long and excellent post from Don Hoagie in that thread, which contains this:
IMAGES: As a general rule, I would not include anything of informational value in an image. This goes beyond the web-apps’ HTML butchering, because users can set their own mailboxes to not allow images. When you do include images, note that Hotmail just plain sucks at showing images. It doesn’t show images located in the CSS (i.e., background-image: url(example.gif), and even if you put your image in the HTML, Hotmail will render it as an attachment, and only show it after the user has clicked on and accepted the attachment. The other thing Hotmail does is re-route the URL of your image, apparently to some temporary image server or something that they use.
The problem started with MS Outlook, so I told the client to use a new email client to send the mail. After trying PowerMail (against my advice, due to the fact that it can't send HTML) and a free autoresponder, the client is still after me to work it out for her. I appreciate the help, as I am already doing a new batch of emails for a different client and would not want to have the same stuff happen.
In general, I avoid anything but table-based layouts for email messages since there are so very many clients to test on, and each situation has its own quirks.
That and old school HTML e.g. align="right" border="0" hspace="15", etc.
Are you sending both HTML and Text versions?
