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.
Photoshop Tip #3: Bullets in Photoshop
It’s time for another quick Photoshop tip. The other day I was working on an HTML mockup in Photoshop and said, “Hey wouldn’t it be great if there were bullets”. My co-worker turns around and says you can make them, and it’s super easy. It’s not really like ordered or unordered lists in HTML; you still have to type in the numbers or bullets manually, but it’s as close as you’ll get.
Once you have your list created in a text box, go to the Paragraph window. Go to the Indent first line field and type in a negative value. For this example I have 11 pixel Verdana text with a -15px first indent.
From the screenshot above you can see we now have perfect bullets in our mockup.
Photoshop Tip #2: border keyline / stroke
Okay, this may be super obvious for some people, but in case it’s not, here’s a neat tip. When I do borders or keylines, I usually like to make the layer on the very top.
The easy way to make a keyline is to draw a box with the rectangle tool, make sure it’s a shape layer, this makes editing it later easy. Right click the layer you just created, select Blending Options, then select Stroke. This should be pretty easy. I usually stroke on the inside; the default is outside but this will not give you sharp corners.
Okay, now you have your keyline; go back to the Layers window go to the Fill slider and bring it down to 0%. Opacity and Fill are very similar with one important difference. Opacity affects the entire layer, while Fill only affects the fill of the layer. This means our Blending Options will remain unaffected.
So why not just create a box with stroke and put it on the bottom layer? Well this works for some layouts, but what if you want patterns or shapes that overlap the box, but do not overlap the keyline as shown in the image below. This is where this technique comes in handy. The only real downside is when you use the Direct Selection Tool you end up selecting your top layer, so you may need to turn this layer on and off.
Photoshop Tip #1: Smart objects and layer masks
I run into a lot of little obstacles in Photoshop from week to week and I thought I would share some of my Photoshop tips and workarounds from time to time.
Layer masks are a really important part of Photoshop. If you are an avid Photoshop user you probably use them all the time. There is however one pesky little problem with layer masks and that is how they work with Smart Objects. Unlike every other kind of layer in Photoshop, you cannot link a mask to a smart object. This means that when you nudge or move a smart object layer, the mask does not move with it.
Now there are cases where this is the desired behaviour, and that’s what link/unlink is for, but for some strange reason there are is no linking capability for Smart Objects. Not very smart, try having 10 masked Smart Objects in a web layout and moving everything around. You have to nudge the Smart Object, and then nudge each mask.
How do you get around this? Very simple, put your smart object into a layer group, and add the mask to the group. Yes it does add more complexity to your layers pallet, but now you can easily move around your Smart Objects and layer masks at the same time making your life much easier.
Adobe Photoshop CS3 and no Image Ready? Animated GIF’s Part II
My blog entry titled “Adobe Photoshop CS3 and no Image Ready? No animated GIF’s either?” has quickly become my most popular post to date. Many questions have led me to elaborate on how to create GIF’s in Photoshop CS3 on a PC and probably on a Mac. Why probably on a Mac? Well, since the Mac save and open dialog boxes do not allow you to use your own filters like *.* it is harder to work around the lack of an import animated gif feature. You could try importing it as a known file type like MOV, and then resaving it as a GIF, but I think this might make your timeline look odd and I haven’t researched this enough because I do not have access to a Mac at home. That said, I have tried it at work, and the timeline looked like a MOV timeline, not the GIF timeline, but I’m sure with a bit of fooling around you can get it to work. Feel free to post your solutions and elaborations in the comments section of this post. That said, the following on how to create an animated gif should pose no problems on a Mac or PC.
Basically a lot of the Image Ready features were copied into Photoshop CS3. If you go to the “Window” menu you will see the “Animation” window option. This will bring up the animation window. Fig. 1.
For a test create four layers in your layers window with the numbers 1 through 4 or whatever you like. Once you are done, go to the Animation window and click the fly out arrow. This is the little down arrow. See Fig. 1.
Now you should see a menu with several options. Select the option that says “Make Frames From Layers” You can see your layers are now frames in the animation window. See Fig. 2. You can still edit your layers the way you normally would. You can also tweak the timings in the “Animation” window.
Now there are better programs for animating GIF’s, but for those of us who don’t create animated GIF’s everyday this is a workaround which I use. That said Adobe may remove support for animated GIF’s all together in future releases, or maybe they will add an import animated GIF option. Hopefully the later, but I have a sneaky feeling as one poster said in my past entry on this topic that if Adobe wanted us to buy Fireworks to create animated GIF’s then the lack of support in Photoshop may be no mistake on their part. You can also always use Flash to create Animated GIF’s also, but a lot of people used Image Ready, and I hope they continue to support this feature in Photoshop. For quick and dirty GIF animation tweaks it was a great tool.
