Newsletter formatting problems

jhande · May 25, 2008

I've googled and searched everywhere but came up empty. <_<

I created the below HTML test newsletter:

 </P> <P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
<html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hande's Hobbies Newsletter</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFF99;
}
body {
background-image: url(catalog/images/CarbonFiber_BKG.gif);
background-repeat: repeat;
}
a:link {
color: #33CC00;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #33FF00;
}
a:active {
text-decoration: none;
}
-->
</style></head></P> <P><body>
<div align="center"><img src="catalog/images/Handes_Logo2.gif" width="320" height="50" longdesc="<A href="http://handeshobbies.com/catalog">http://handeshobbies.com/catalog</A>" /></div>
<p>Welcome to <a href="<A href="http://handeshobbies.com/catalog">http://handeshobbies.com/catalog</A>" target="_blank"><strong>Hande's Hobbies</strong></a> official Grand Opening of our new online catalog.</p>
<p>Starting off with our line of 1:24 and 1:25 scale plastic automotive kits, paints, tools, accessories, etc...</p>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
 <tr>
<td><div align="center"><img src="catalog/images/Images/Revell/Thumb/RMX_2211_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="catalog/images/Images/Revell/Thumb/RMX_1506_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="catalog/images/Images/Revell/Thumb/RMX_2022_T.jpg" width="120" height="86" /></div></td>
 </tr>
 <tr>
<td><div align="center"><img src="catalog/images/Images/Iwata/Thumbnail/IWA_ECL-4500_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="catalog/images/Images/Iwata/Thumbnail/IWA_IS-850_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="catalog/images/HandTools_logo.jpg" width="125" height="65" /></div></td>
 </tr>
</table>
<p>We will also be adding some beading/jewelry supplies along with many more items.</p>
<p>Give us a visit and come back often as our online catalog will continue to grow with many, many items each month.</p>
<p>Best wishes and happy modeling,

 Jim Hande / Owner
</p>
</body>
</html>
</P> <P>

What worked:

Font family
Font size
Table was created
Hyperlink

What didn't work:

Font color
Images (just broken image placeholders & no background)
Link decorations
Link colors

The "what didn't work" was in both the Newsletter preview in Admin and the sent email.

Any ideas as to what might need to be changed with the HTML coding to fix it?

I'm a little stumped since some of the code worked, while some didn't. :huh:

germ · May 25, 2008

Save this as an HTML file on your PC, and open with your browser.

The 4th and 5th images need worked on (red X):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hande's Hobbies Newsletter</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFF99;
}
body {
background-image: url(http://handeshobbies.com/catalog/images/CarbonFiber_BKG.gif);
background-repeat: repeat;
}
a:link {
color: #33CC00;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #33FF00;
}
a:active {
text-decoration: none;
}
-->
</style></head>
<body>
<div align="center"><A href="http://handeshobbies.com/catalog"><img src="http://handeshobbies.com/catalog/images/Handes_Logo2.gif" width="320" height="50"></A></div>
<p>Welcome to <A target="_blank" href="http://handeshobbies.com/catalog"><strong>Hande's Hobbies</strong></a> official Grand Opening of our new online catalog.</p>
<p>Starting off with our line of 1:24 and 1:25 scale plastic automotive kits, paints, tools, accessories, etc...</p>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
 <tr>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/Images/Revell/Thumb/RMX_2211_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/Images/Revell/Thumb/RMX_1506_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/Images/Revell/Thumb/RMX_2022_T.jpg" width="120" height="86" /></div></td>
 </tr>
 <tr>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/Images/Iwata/Thumbnail/IWA_ECL-4500_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/Images/Iwata/Thumbnail/IWA_IS-850_T.jpg" width="120" height="86" /></div></td>
<td><div align="center"><img src="http://handeshobbies.com/catalog/images/HandTools_logo.jpg" width="125" height="65" /></div></td>
 </tr>
</table>
<p>We will also be adding some beading/jewelry supplies along with many more items.</p>
<p>Give us a visit and come back often as our online catalog will continue to grow with many, many items each month.</p>
<p>Best wishes and happy modeling,

 Jim Hande / Owner
</p>
</body>
</html>

jhande · May 25, 2008

Save this as an HTML file on your PC, and open with your browser.

The 4th and 5th images need worked on (red X):

Thanks Jim! ;)

Now I see what my problem was with the images... :blush: I used Dreamweaver and it didn't add the complete URL.

It does look fine in my browser, but when I transfer the code to the Admin > Newsletter it loses the background image, font and link colors in both the preview and sent email.

Plus I can't figure out why some images work while others don't. Maybe I need to check a setting on my server for different image folders??? :huh:

germ · May 25, 2008

I really don't know much about how the Newsletter works in osC.

All I can do is make it look good in my browser.

The images that don't work are these:

http://handeshobbies.com/catalog/images/Images/Iwata/Thumbnail/IWA_ECL-4500_T.jpg

http://handeshobbies.com/catalog/images/Images/Iwata/Thumbnail/IWA_IS-850_T.jpg

I don't think they exist (wrong name?)

germ · May 25, 2008

Found them:

http://handeshobbies.com/catalog/images/Images/Iwata/Thumb/IWA_ECL-4500_T.jpg

http://handeshobbies.com/catalog/images/Images/Iwata/Thumb/IWA_IS-850_T.jpg

Maybe?

jhande · May 25, 2008

Found them:

http://handeshobbies.com/catalog/images/Images/Iwata/Thumb/IWA_ECL-4500_T.jpg

http://handeshobbies.com/catalog/images/Images/Iwata/Thumb/IWA_IS-850_T.jpg

Maybe?

:blush: Yes those are them Jim :blush:

My bad...

Back in October I noticed a few of my folders where not consistanly named (notice - Thumb vs. Thumbnail).

I corrected them on my end but forgot to fix them on the server. I quess that will teach me for staying up until 3am trying to work on the site and files. :wacko:

I wasn't sure if the stock newsletter function was working correctly, had bugs in it and I needed to look for a contribution, or if it was just my coding. Maybe a little of both? LOL

I'll play around with it some more after a few hours sleep.

Thanks again Jim for coming to my rescue. ;)

germ · May 25, 2008

I found this in my notes about sending HTML newsletter emails:

I just recently set this up for ourselves... it's a pretty simple change.

MAKE BACKUPS FIRST!

Find catalog/admin/includes/modules/newsletters/newsletter.php

Around line 63 find:
$mimemessage->add_text($this->content);
And change it to:
$mimemessage->add_html($this->content);
And then I BELIEVE you have to go into your Admin Panel -> Configuration -> E-mail Options

and set "Use MIME HTML When Sending Emails" to true (I'm not sure if this NEEDS to be done... I changed this before I changed the code to see if it would work and never bothered with changing it back).

That should do it... it works on our site, anyways. If you have a development site or something set your email to the only one with a newsletter subscription and send yourself some random HTML (I did "<h1>Test</h1>" for instance).

Hope this helps.

I got it from a post around here somewhere.

I just thought I'd throw that in for you to consider/check out.

jhande · May 25, 2008

Thanks again for trying to help Jim ;)

I had made that change long ago when I first stumbled across it.

I just tried changing some of the embedded stylesheet settings. It seems that the newsletter is ignoring everything in the styles settings in the head tag.

I'm not sure if it's as simple as changing - Content-Type: text/html; charset="iso-8859-1" and/or Content-Transfer-Encoding: quoted-printable. My luck their is some code buried somewhere that is causing the problem. <_<

Thanks again Jim

germ · May 25, 2008

I suppose the "fault" could be in whatever you're using to read the email with.

Have you tried different email accounts (i.e. Yahoo!, MSN, Gmail, mail read with Outlook, etc.) to see if it displays the same in all?

:unsure:

The only other thing I could suggest if you can't get this worked out is make a Newsletter HTML page on your site (similar to the HTML code posted) and just send the link to it in your Newsletter.

Good luck!

:)

jhande · May 25, 2008

I suppose the "fault" could be in whatever you're using to read the email with.

Have you tried different email accounts (i.e. Yahoo!, MSN, Gmail, mail read with Outlook, etc.) to see if it displays the same in all?

:unsure:

The only other thing I could suggest if you can't get this worked out is make a Newsletter HTML page on your site (similar to the HTML code posted) and just send the link to it in your Newsletter.

Good luck!

:)

Thanks Jim!

I just tried sending the newsletter to my Earthlink account instead of my Yahoo account. Same thing, embedded styles ignored.

I'll keep pocking and probing until I get totally fustrated and probably design a newsletter format without styles. <_<

Thank you again for all your help. ;)

spax · May 25, 2008

Use inline styles:

<body style="font-family: Tahoma, Verdana, sans-serif; font-size: 12px; color: #000; text-align: left; background: url('http://www.domain.com/images/image.jpg') left top; margin: 0px;">

<div style="width: 720px; padding: 10px; border: solid 1px #7387FF;">Content</div>

<p style="color: #ff0000;">Text</p>

<span style="font-weight: bold;  font-style: italic; color: #353FFF;">Text</span>

etc, etc.

jhande · May 26, 2008

Thank you so much Peter! ;)

Your a saint... :)

Now all I have to do is figure out how to add the styles to the text link.

Very much appreciate the help.

spax · May 26, 2008

Jim,

Other than giving an anchor tag a color attribute and some text-decoration, you can't do a lot from an inline style. An email client like Outlook, will read from an external stylesheet so call yours from the <head> of the newsletter, @ the full path and you should be ok. I think non POP3 clients have trouble reading external stylesheets - the one I use regularly does, at least.

jhande · May 28, 2008

Hey Peter,

Thanks for the tip!

I did a bit more Googling and found a few articles discussing E-mail Newsletters and the problems with formatting them for the different E-mail clients. WOW, it seems to be an art and discipline all in it's own.

A few tricks I'm going to try after reading the articles that are supposed to help -

Embed the <body> tags in <div> tags
Keep most attributes inline
Embed the <styles> in the <body>
Link to an external style sheet from within the <body>
Place necessary images into their own folder, such as Email_Images in the root

Now it's back to one of the newsletter.php files to tighten up the line spacing in the code. ;)

npn2531 · December 1, 2008

Hey Peter,

Thanks for the tip!

I did a bit more Googling and found a few articles discussing E-mail Newsletters and the problems with formatting them for the different E-mail clients. WOW, it seems to be an art and discipline all in it's own.

A few tricks I'm going to try after reading the articles that are supposed to help -

Embed the <body> tags in <div> tags

Keep most attributes inline

Embed the <styles> in the <body>

Link to an external style sheet from within the <body>

Place necessary images into their own folder, such as Email_Images in the root

Now it's back to one of the newsletter.php files to tighten up the line spacing in the code. ;)

npn2531 · December 1, 2008

I have worked on this issue, and have worked out what works re styling issues. Generally internal or inline styles things seems to work fine. Images and hyperlinks work. However, the Newsletter manager plays havoc on lines spaces. Depending on the placement of a <table> tag for example you can get 5-6 extra lines preceding it. Hitting return for example in the Newsletter Manager comes out as in the preview and the emailed letter. (btw, preview seems to always match the emailed letter)

Have you found a solution to spacing problems?

jhande · December 1, 2008

Have you found a solution to spacing problems?

I have designed a few Newsletters in Dreamweaver and then I copy/paste the code into the Newsletter Manager.

So far so good.

It's just a pain coding inline styles when Dreamweaver likes to create embedded styles.

kbking · December 1, 2008

Hi!

You might find some use of this little tool.

npn2531 · December 1, 2008

Thanks for the tool tip!

Here is an example what I struggle with in the Newsletter Manager. Note the example below which was created in Golive and then edited in the Newsletter Manager does line up and images and links are good. But look at the goofy thing I did to line it up: Take out the margin-top:-600px in the table tag and the resulting email leaves 600px of blank space at the top.

Also if I use a <fieldset> tag, no problem but when I open up the Newsletter (edit button) this will have appeared

<tr>

Make sure you receive our emails! Add [email protected] to your address book.

</td>

</tr>

<tr>

<td colspan="4" align="right" style="background: url(http://www.oscommerce.com/images/oscommerce.gif) no-repeat;font-family: verdana,arial,geneva; font-size: 36px; line-height: 16px;color:#a1a1a1;"> refocus your world

</td>

</tr>

<tr>

Dear Customer,

We hope you are pleased with your lastest purchase. We have listed them below. Please take a few moments to let us know your opinion. Just click below and write a review!

</td>

</tr>

<td colspan="4" align="center"><img src="http://www.niora.com/images/cciphone.gif"> Iphone <a href="http://www.apple.com/images/cciphone.gif">write a review</td>

</tr>

<td colspan="4" align="left" style="font-family: verdana,arial,geneva; font-size: 13px; line-height:15px;color:#808080;"> Based on your purchases we feel you will find the following items of interest: </td>

</tr>

<td colspan="4" align="center"> <img src="http://www.niora.com/images/cctunebase.gif"> Iphone Tunebase <a href="http://www.apple.com/images/cciphone.gif">learn more</td>

</tr>

<tr>

<td colspan="4" align="left" style="font-family: verdana,arial,geneva; font-size: 13px; line-height:15px;color:#808080;"> Visit Camera City and check out our great prices and learn more about us: </td>

</tr>

About Us

<a href="http://www.yourstore.com">Contact</a>

<a href="http://www.yourstore.com">Polices</a>

<a href="http://www.yourstore.com">Unsubscribe</a></td>

Cameras

<a href="http://www.yourstore.com">Canon</a>

<a href="http://www.yourstore.com">Nikon</a>

<a href="http://www.yourstore.com">Sanyo</a></td>

Accessories

<a href="http://www.yourstore.com">Tripods</a>

<a href="http://www.yourstore.com">Memory</a>

<a href="http://www.yourstore.com">Camera Bags</a></td>

Books

<a href="http://www.yourstore.com">'Photography for Dummies'</a>

<a href="http://www.yourstore.com">'Ansel Adams Retrospective'</a>

<a href="http://www.yourstore.com">'Techniques for Pros'</a></td>

<tr>

<a href="http://www.yourstore.com">policies </a> | <a href="http://www.yourstore.com">about us</a> | <a href="http://www.yourstore.com">unsubscribe</a> | <a href="http://www.yourstore.com">[email protected]</a> |<a href="http://www.yourstore.com">www.niora.com</a>

</td>

</tr>

</table>

npn2531 · December 1, 2008

I really like that email parsing tool. However, it's still an issue of the Newsletter Manager adding line space. One example of a problematic thing it does is registering a 'return' as a . That is, if you hit the return in the Newsletter Manager you see nothing but white space which you would expect wold be ignored, but the resulting email will have added an extra line there, just as if you had typed in .

Conversely, putting two elements on the same line in the Newsletter Manager even with no space between them, does not always eliminate line space. I tried this by creating documents in the Newsletter, by cutting and pasting (and pasting and cutting and pasting) from HTML editors, and now from that handy email parsing tools. The result are consistent: Newsletter Manager adds line space where you can't see any code to indicate that it will.

It's hard to conclude that the Newsletter Manager parses line space like the rest of the universe.

npn2531 · December 1, 2008

One additional thing I can consistently reproduce in Newsletter Manager:

It will add space above the resulting email, or preview, depending on how much info is between <head> tags.

That is, it is if Newsletter Manager parses stuff twixt the head tags as body info and gives it space (blank lines). If you eliminate all head info and simply start with something like div or table, Newsletter Manager decreases that space, but not entirely.

npn2531 · December 1, 2008

One additional thing I can consistently reproduce in Newsletter Manager:

It will add space above the resulting email, or preview, depending on how much info is between <head> tags.

That is, it is if Newsletter Manager parses stuff twixt the head tags as body info and gives it space (blank lines). If you eliminate all head info and simply start with something like div or table, Newsletter Manager decreases that space, but not entirely.

jhande · December 2, 2008

Hey George,

Give this a try - U HTML Emails

;)

Newsletter formatting problems

Recommended Posts

jhande

germ

jhande

germ

germ

jhande

germ

jhande

germ

jhande

spax

jhande

spax

jhande

npn2531

npn2531

jhande

kbking

npn2531

npn2531

npn2531

npn2531

jhande

Archived

Browse

Activity