Outlook 2007 losing font-family declaration
Email clients are one of the pinnacle frustrations for web designers. The limitations are far greater than those of web browsers and you can always count on Microsoft’s Outlook 2007 being at the forefront of compatibility problems and bug issues. If you create emails that have to support Outlook 2007′s wonky Word rendering you may have noticed on occasion that your specified font-family disappears. There’s a few ways to fix this, but some are better than others.
How to fix floated images and list overlap
The other day I was looking at my blog and saw that one of the posts had a left floated image followed by a bulleted list. The problem was that the list was not indenting properly the way it did when next to a paragraph without a floated element. After a bit of searching and hair pulling I found a discussion that solved my problem.
Facebook Development: breaking the application canvas with iFrames
I recently started developing an application on Facebook. It’s actually quite interesting although the Facebook developer interface leaves a lot to be desired. If a chat program operated the way Facebook does it would go something like this. To add a user you must first add the addUser application. Once this is completed you can add the first use through the addUser applications, but after that you must go to the first added user to add an additional user, it’s really a… but I digress. This post is about Facebook’s application canvas and specifically developing applications with the iframe option enabled.
IE6 specific CSS
When Internet Explorer 7 came out it was a huge disappointment to many web designers. It’s still littered with bugs and quirks, but a lot of things that were not recognized in IE6 are fixed in 7. This adds even more problems to the mix, because now we have to code for two bad browsers and IE6 still represents a huge chunk of users. With email design you also have to remember that many email programs render like IE6 or even use the IE6 engine.
Firefox – some website images do not load
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.
Why do my pages trigger quirks mode in IE6 or IE7?
I was dealing with this a few weeks ago and it took me awhile to figure out. I had a proper doctype and viewing the source code showed that everything was okay. I was trouble shooting the php html and css, but to no avail. I’d dealt with this issue once in the past, I was sure of it. Finally it hit me when looking through the drop-downs of Notepad++. It turned out to be the character encoding, or the BOM in the character coding to be precise.
Choosing the wrong web browser
The first browser wars ended years ago and now it seems they are back for a second round. I don’t think they will ever match the Netscape vs. Internet Explorer days, and today there are many more platforms to consider. Before reading this post further, I should mention that I am a web designer / developer and I have an axe to grind with Microsoft, especially when it comes to their browser. I will actually be completely blunt and say that this browser is downright horrible and the only reason it has any market share at all is because it is included with practically every mainstream computer sold on the planet. The very fact that Firefox has gained so much ground over the past three years against such incredible odds is testament not only to how great Firefox is, but also to how horrible Internet Explorer is.
Leaving Windows Vista behind — the return to Windows XP
After over a year of non-stop problems with vista I have returned to Windows XP on my home computer and plan to do so at work within the next week. I know we all complain about Microsoft, but in the case of Windows Vista it’s exceeding well earned.
GTA 4 unknown contact bug fix
A friend of mine ran into a serious problem where they could no longer progress in the missions of Grand Theft Auto 4. When they went to the yellow way point arrows nothing happened and the mission would not trigger. It seems to happen after “The Puerto Rican Connection” mission when you receive a call from an unknown person. I did a few searches on the web and found several other people having the same problem. Many had to start the game over, but the good news is there is a fix.
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.
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.
