Outlook 2007 borders and 1px padding on table cells!
Anyone creating email newsletters on a daily basis will tell you how hard it is to get them to render properly in all email clients, but getting them to work in Outlook 2007 can be maddening as any quick Google search will show.
Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.
As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.
Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.
And here is how it’s supposed to look after the fix. No white border / padding.
And the fix?
table td {
border-collapse: collapse;
}
I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.
Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outlook 2007 Test</title>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
<tr>
<td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
<td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
plain text.</td>
</tr>
</table>
</body>
</html>
You may also want to check out my other entries on this topic.
WordPress 2.5 media uploader fix
WordPress 2.5 has brought a lot of fantastic improvements to the popular blogging software, but with this new release came a lot of problems with the Add media window. After looking around the web I found a lot of solutions, so I don’t take credit for this, but I’d like to help spread the word.
A lot of servers run ModSecurity a popular web application security module for the Apache Web server. I’m not an expert in this area, so I’m assuming that ModSecurity is doing something to the media uploader.
That said there is a way to exclude ModSecurity from the WordPress file being affected. In the root of your WordPress install edit your .htaccess file to include these lines.
<IfModule mod_security.c>
<Files async-upload.php>
SecFilterEngine Off
SecFilterScanPOST Off
</Files>
</IfModule>
This should exempt async-upload.php from ModSecurity rules.
