Keeping code clean in the messy world of email newsletters

Obviously putting the font-family in the table or a surrounding div should do the trick, and it does for everything except Outlook 2007, for some reasons font-family declarations do not cascade. One easy but tedious way to fix this issue is to put inline styles all over the place. I don’t like this method, it makes it easy to forget sections of copy and it messy. I always especially avoid using inline styles on paragraph tags. You have have almost no control on the p tags anyway. Put everything you need in your td tags and leave your p tags clean.

So you might be thinking well then I’ll just add font-family declarations to all my td tags. Again this is slightly less messy, but still messy and our newsletters markup are awfully messy as it is. This is a place where you can use an embedded style. I know there are blanket rules like never user anything but inline styles, but this is not always the case, and blanket rules never benefit anyone. There are places for embedded styles, and they are even required in some cases for optimal cross client compatibility as I wrote about in “Outlook 2007, inline styles, and links“. The thing you must always remember when using embedded styles is that other email clients like Gmail are going to ignore them completely, so build in redundancies.

Style the table data

The fix is simple, you only need to declare your font-family twice. Use an inline style once in your table.

<table border="0" cellspacing="0" cellpadding="0" style="font-family:font-family:Verdana, Geneva, sans-serif;">

At the top of your page add this to your embedded style.

<style media="all" type="text/css">
td {
     font-family:font-family:Verdana, Geneva, sans-serif;
}
</style>

Now you have made Outlook 2007 happy and given every td in your email newsletter a font-family. When the embedded style is stripped in other clients like Gmail you are still keeping the client happy, because other clients won’t ignore the font-family in the table tag and it will actually cascade throughout the document.

The problem illustrated

As you can see the list on the left image does not properly aligned, while the one on the right is. The fix is quite simple.

ul, ol {
	overflow: hidden;
}

Use overflow:hidden on your ul and ol tags. This will stop your lists from flowing around images too, but that’s probably a good thing because a list flowing around an image isn’t every pleasing to the eyes.

Getting it to work in IE6

You didn’t think you were finished did you? When I did the redesign for ianhoar.com I really wasn’t sure if I would support Internet Explorer 6 at all, but in the end I decided that if I still have to support it on my professional projects then my blog should probably support this truly awful browser too.

The IE6 fix is a zoom:1 declaration. Unfortunately the zoom declaration is not valid CSS. You can get around this by creating a second CSS file called ie.css and use conditional comments when linking the file.

ul, ol {
	zoom:1;
}

And the CSS conditional

<!--[if IE 6]>
	<link rel="stylesheet" href="ie.css" mce_href="ie.css" type="text/css" media="all" />
<![endif]-->

Your lists should look a lot nicer now when situated next to floated images or other floated elements.

In Internet Explorer (of course) you will lose the Facebook interface whenever a user clicks a link or submits a form. This drove me crazy, because an iframe was the only way for me to access the database on the server I was using. The solution was remarkably easy. It’s a header you can add to the top of your app.

"p3p", "CP=\"CAO PSA OUR\""

In PHP it looks like this.

header("p3p: CP=\"CAO PSA OUR\"");

More information can be found on the Facebook Developer forums.

• Breaking the Facebook canvas iframe in IE.
• iframe applications and P3P HTTP headers, “why make sure to implement P3P if using iframes?” cookies and session will not work in some browsers.
  

Always standards compliant

I always like to write standards compliant code whenever I can, with email it’s not even an option. With web, unless you are working with someone else’s mess it should always be standards compliant, but what happens when something won’t work in IE6 but does in IE7. It could be a double margin float bug, or the 3 pixel gap bug. Ideally you should try not to work yourself into a situation where these bugs crop up, but usually by the time they have it’s too late.

CSS that IE6 doesn’t understand

Okay, this tip means using redundancy, and I really like to avoid that, but sometimes you just have to make it work in the name of saving time and your sanity. The great thing is, although some may consider it a hack this will still be standards compliant.

Usually what happens is one attribute is throwing off IE6, while IE7, Firefox, Safari and Opera look fine. You are out of time, what do you do? Well, he’s a quick fix, use child selectors. I have used this method on my blog.

.panelLeft {
     padding:10px 0 10px 0;
}
#panels > .panelLeft {
     padding:10px 10px 10px 0;
}

So first we set the panelLeft class padding for everything. IE6 does not understand child selectors and ignores them, so for finer tuning we use a class selector that says the child class panelLeft of panels gets the same padding as the first declaration plus a right padding of 10 pixels. This right padding in my case was throwing off the entire layout in IE6. It’s only one example, I have used child selectors on several occasions. Sometimes absolute positioning will be totally off in IE6, this is another way you can use two positioning values.

Anytime you have CSS that is only breaking in IE6, you can track down what is causing the bug and use this method to set IE6 specific values. I hope this saves some people a bit of time and sanity.

I’ve had this strange Firefox bug happen on only a few occasions. I’ll be surfing the web when out of the blue some sites will not load images. Restarting the browser doesn’t seem to correct the problem either.

A quick fix for this this is to go to:

Tools / Options

Select the Advanced tab, then below that select the Network tab.

Under Cache click Clear Now.

This seems to fix the issue.

If you are using a UTF-8 character encoding and the BOM (Byte-order mark) is included, it will cause Internet Explorer 6 or 7 to go into quirks mode. This can throw off your page rendering. The obvious signs are when your page is no longer centred or you have wacky padding which can cause the entire layout to be thrown out of whack.

In Dreamweaver you can go to Modify / Page Properties and then select Title/Encoding. If you have an encoding of Unicode (UTF-8) selected you should see a check box at the bottom that says “Include Unicode Signature (BOM)“. If this is checked, uncheck it. In notepad++, my text editor of choice, you can go to Format / Encode in UTF-8 without BOM. Other editors should also have an option similar somewhere to change the character encoding behaviour.

If this was the problem, then your page should now be rending with the appropriate doctype instead of quirks mode.

Let’s talk about web standards, even though most people probably don’t give a damn about them, you should because they affect you and here’s why. Years ago I made a really dumb comment (not the first time, and probably not the last). I remember looking at web pages with malformed tables which Netscape rendered as blank, while IE rendered the content fine. Someone told me that there was an error in the table and this was why Netscape would not render the content properly. I replied by saying this was stupid, and at the end of the day all I or anyone else for that matter cared about was if we could see the content. Netscape later started rendering broken tables like IE, but my comment was very dumb.

If something is broken, it should not work. Making it work is taking a leap of faith and hoping it will display the way the developer / designer intended. If browsers were strict and only rendered proper code then we wouldn’t be in the mess we are today. The developer / designer would immediately see their mistake and fix it, thus avoiding cross platform issues we have today. Now his page should work across the board in any standards compliant browser without further testing, although testing is always recommended.

This is even more important in today’s rapidly changing Internet. We are beginning to access the web in many different ways, and this is only going to accelerate with time. As Wi-Fi signals get stronger, and cell phone bandwidth gets cheaper we will see more and more people accessing the web through hand held devices like the Blackberry and iPhone. We need to conform to web standards more than ever. Do you want your favourite website to work in Internet Explorer at home but not on your iPhone while you ride transit to work, or when sipping coffee at Starbucks? When sites use proprietary non-compliant IE garbage like active x, not only do they close many avenues, but they also leave themselves at the mercy of Microsoft’s security bugs and extremely slow development time. Look at how long it took for Internet Explorer 7 to come out and add features that had already existed in other browsers for years. It took 6 years, that’s an eternity in web years. Microsoft rarely releases updates for IE unless they are major security fixes. Internet Explorer 7 has also brought along a huge list of old bugs and new bugs.

There are so many other reasons why non-standard mark-up and code like ActiveX are bad, but most of them seem like self serving rants to the average Joe. Developers generally have to spend more time, more money, and more effort to get things to work in IE. So what you say, that’s your job. Well, this costs time and money for companies, and most of all it costs innovation. Instead of moving the web forward and adding the newest and greatest technologies, developers are saddled spending their time trying to make things work in IE. There is no doubt in my mind that Internet Explorer has stagnated and held back web innovation and development.

So which browser do you pick? Well, sometimes it’s not a choice as with hand held’s and game consoles, but almost anything is better than Internet Explorer. Firefox is a favourite of developers, and the most used non-Microsoft browser at the time of this writing. Other rising stars are Opera and Safari. Opera has been around for years and many swear by it as their browser of choice. Nintendo’s Wii and DSLite also use Opera. Then there’s Safari, this is a Mac browser, but it is also the browser in the iTouch and iPhone. If the iTouch and iPhone really take off expect to see Safari usage stats go up too. You can also now get Safari for Windows.

In general I don’t really want one browser to ever dominate. That’s what Internet Explorer did for 6 years, and for 6 years the web lurched forward with hacks and tacked on functionality to make IE work. When IE first released Internet Explorer 4 it really was better than Netscape 4, but after they won the browser wars they never seemed to take their browser seriously anymore. Having many browsers to choose from keeps companies and developers on their toes, so pick the browser you like most, even if it is IE, but don’t ever pick IE just because it came with your computer. You will be missing out. Almost everything in Internet Explorer 7 has been around for years in other browsers and is just copied. IE is playing catch-up right now, and it’s still in last place.

• Mozilla Firefox website
• Google Chrome website
• Opera website
• Apple Safari website
• W3Schools web browser statistics

I will start with my Wacom tablet. The first thing I noticed from day one was that it was not working properly. After installing the Wacoms drivers, Vista’s horrible pen drivers took over. Even once I figured out how to disable them, both my work computer and home computer never stopped showing up as a tablet PC. Then their was the issue of Vista ceasing to even recognize my Wacom device after locking the PC or going away for a bit. I would come back only to find that the mouse cursor would not move at all, the solution? Reboot or use the keyboard shortcuts!

Okay, so Wacom i devices are not that common, I should cut Vista some slack, and maybe I would if that wasn’t just the tip of the iceberg. There is the weirdness of logging in one morning watching it take an extremely long time (not unusual for Vista) because it has lost my user settings and is recreating my desktop from scratch! In frustration I powered off only to have it magically work the second time around. I had to use this power off trick several more times when this happened.

The problem I experienced the most of all, both at work and at home would happen my dialogue focus was lost. What do I mean by this? Well, when I clicked an okay, cancel, continue, etc. on whatever dialogue box was on the screen, Vista would lose focus of that window. I could not click on any buttons! The solution? Reboot of course.

These are just some of the major headaches I’ve had, but others have had problems too, just searching Windows Vista will get you page after page of angry users who can’t get printers to work, extremely long boot times, Office crashes and many more, the list goes on and on. Vista is a huge resource hog too, and I have a fairly fast laptop. I feel like I have just upgraded to a super computer. My start menu pops up instantly, browser tabs are instant, I can even multitask with speed again. I don’t get the constantly “Program not responding”. I should have done this a long time ago; the number of hours lost is probably quite high for me. I will never touch Vista again, lets hope the next Microsoft OS is better.

Another interesting stat to watch is the decline of Windows XP users on W3schools browser OS stats. Windows XP over the past two months seems to be gaining users? Maybe it’s just an anomaly.

In order to trigger the missions again you need to call one of your contacts. It’s probably best to call Roman and book something with him. This should trigger the stories progress. I’ve also read that a manual save can work too, but I know for sure a call too Roman will work. I have not actually experienced the bug myself, but this work for my friend. The bug also seems to effect both PS3 and 360 versions of the game. GTA 4 is still a fantastic game, and hopefully not too many people experience this bug and if they do I hope this helps and hopefully Rockstar will have a fix for it soon.

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.

• Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
• Email html design and deployment quick tips