HTML email styling problem

[eluser]matteus[/eluser]
When I try to send an email with the email class it all works and sends properly etc, however, when the email arrives in my Outlook 2000 inbox it doesn't render properly. I've also cc'd the email to my hotmail account and that looks just fine.
When I view the email->print_debugger() output I see the following:

Code:

Your message has been successfully sent using the following protocol: mail

User-Agent: CodeIgniter
Date: Mon, 7 Apr 2008 19:30:10 +0100
From: "dfndfn"
Return-Path:
Cc: [email protected]
Bcc: [email protected]
Reply-To: "[email protected]"
X-Sender: [email protected]
X-Mailer: CodeIgniter
X-Priority: 3 (Normal)
Message-ID: <[email protected]>
Mime-Version: 1.0
Content-Type: multipart/alternative; boundary="B_ALT_47fa683241bb9"
This is a multi-part message in MIME format.
Your email application may not support this format.

--B_ALT_47fa683241bb9
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: 8bit

whwehweh


--B_ALT_47fa683241bb9
Content-Type: text/html; charset=iso-8859-1
Content-Transfer-Encoding: quoted-printable
Web Form Message
&lt;html&gt;&lt;body style=3D"margin:10px;padding:0;background:#CCC;"&gt;<p style=3D"fo=
nt-family: Calibri, Arial, Helvetica, sans-serif;font-size:14px;">dfndfn le=
ft the following enquiry:</p><p style=3D"font-family: Calibri, Arial, Helve=
tica, sans-serif;font-size:14px;">whwehweh</p>&lt;/body&gt;&lt;/html&gt;

--B_ALT_47fa683241bb9--

As you can see there are lots of style=3D's and equals signs messing it all up. I read on another forum post http://ellislab.com/forums/viewthread/69463/ something about this being how some email clients render equals sign so use inline styling but this is the actual codeigniter output and I am using inline styling so I'm not so sure that this is the case.

Also I have had a go at the same thing with zend framework and came back to codeigniter because the bcc sent straight to me instead of hiding the email address. It was rendering the html correctly in all email clients though.
If it not one thing it's another!

This is the rest of my setup in the contact form controller, if anyone can help I'd be hugely grateful:

Code:

$config['mailtype'] = 'html';
$config['protocol'] = 'mail';
            
$config['charset'] = 'iso-8859-1';
$config['wordwrap'] = TRUE;
$config['wrapchars'] = 20;

$this->email->initialize($config);

$this->email->from($this->validation->email, $this->validation->name);
$this->email->to('[email protected]');
$this->email->cc('[email protected]');
$this->email->bcc('[email protected]');
            
            
$this->email->subject('Web Form Message');
$this->email->message('&lt;html&gt;&lt;body style="margin:10px;padding:0;background:#CCC;"&gt;<p style="font-family: Calibri, Arial, Helvetica, sans-serif;font-size:14px;">'.$this->validation->name.' left the following enquiry:</p><p style="font-family: Calibri, Arial, Helvetica, sans-serif;font-size:14px;">'.$this->validation->body.'</p>&lt;/body&gt;&lt;/html&gt;');

$this->email->set_alt_message($this->validation->body);

[eluser]Derek Allard[/eluser]
Welcome to CodeIgniter.

Here's a post that may be helpful http://ellislab.com/forums/viewthread/69463/.

[eluser]Pascal Kriete[/eluser]
[quote author="matteus" date="1207612792"]I read on another forum post http://ellislab.com/forums/viewthread/69463/ something about ...
[/quote]

@derek: coffee?

@matteus: It's not the 3D's that are causing your rendering problems. It's the css. The =3D is a normal part of any email, but Outlook is pretty much useless when it comes to css. Inline or not doesn't make much of a difference there. Your best bet is to remove styles systematically until you have the culprit(s).

[eluser]Derek Allard[/eluser]
Oh boy... sorry, I scanned through too quickly. Thanks for the catch inparo.

[eluser]Kinsbane[/eluser]
I built a custom email design template for our sales folks (not using CSS, but my reply is more based on the design side of things). It works well, and we had a few issues regarding styling and such.

One thing to remember is that sometimes Outlook will not display background images at all. I had originally designed a template using fixed-width floating DIVs, but Outlook was having none of this. So, I changed it to a simple barebones table-based framework (I hated doing that) and then used floats and such inside the table cells, which worked out quite well.

I started out by using this link:
http://www.campaignmonitor.com/blog/arch..._emai.html

to figure out what worked and what didn't, which helped out immensely. I then went looking for templates by other folks who had worked extensively with CSS-based email designs. Most notable was this one:
http://www.campaignmonitor.com/resources/templates.aspx and this one: http://www.kinsbane.net/CSSEmail.zip

Finally, another good resource for best practices: http://www.sitepoint.com/article/code-ht...ewsletters

I don't know how CI's email class works with all of this, but my guess is, with a bit of reading, these can be at least painlessly integrated.

[eluser]matteus[/eluser]
That's excellent. Thanks for the replies and the Welcome.

Looking at the debugger html output again, I think this is what was causing the main problem as the html wraps after about 76 characters and places another =. This could be anywhere in the email and I have had test emails where the equals just happens to be in the middle of a word, so this shows up in the email itself.

Thanks for the links to templates but I have put a few email templates together in the past and I still have the problem unfortunately.

I do know about the wordwrap and wordchars preferences and have tried changing this but I think (please correct me if I'm wrong) that this only applies to the text email.

I can put line breaks in but if someone were to put in a long enquiry I think it will show up again.

[eluser]Pascal Kriete[/eluser]
Some googling revealed the answer. You need a linebreak at the end of your email.

[eluser]matteus[/eluser]
Thanks inparo, I've tried this but I still get the equals sign.

It doesn't just do this however, it seems to break the flow of the html too. So things like background colors and fonts don't show up as they should and do in other email clients.

I've tried this in outlook express, hotmail, thunderbird and outlook 2000 (2000 is the one I have to use at work), and 2000 is the only client it happens in.

Really strange, I think I'll stick to thunderbird and deny the existence of outlook 2000.

[eluser]aidehua[/eluser]
Were you on localhost?

See http://ellislab.com/forums/viewthread/69463/#818990