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.
Death of the Middle Click?
Okay, lately more and more I’ve been noticing that my middle click doesn’t work. Why do so many website developers and designers insist on breaking basic usability? Why on earth would you ever want to annoy your users and take away an expected browser behaviour?
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.
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.
jQuery validator plugin – custom method for postal code validation
With my previous post on jQuery, I thought I would share a simple add-on method for the jQuery Validation plugin. If you are from Canada or writing a Canadian validation form with a postal code field you can use this. Just add the code below in your rules script.
// Addon method for validating postal codes. Valid
// formats are (X1X 1X1) or (X1X1X1) or (X1X-1X1).
$.validator.addMethod("postalCode", function(value) {
return value.match(/^[a-zA-Z][0-9][a-zA-Z](-| )?[0-9][a-zA-Z][0-9]$/);
}, 'Please enter a valid postal code');
Then you can use the rules required:true and postalCode:true in your rule set.
How to center Google AdSense ads
It took me awhile to figure out how to center Google AdSense ads. Searches showed that many other people were running into the same issue, so I thought I would share my method for centering.
At first I tried things like margin:auto, center and padding in a <div> wrapped around the ad, but nothing seemed to work. The reason for this is the AdSense box is absolutely positioned. The easy fix for this is to create a CSS class or inline style as shown below.
CSS class
.adSenseCenter {
position:relative;
width:120px;
margin:auto;
}
Container <div>
<div class="adSenseCenter"> adSense code goes here </div>
Or quick and dirty inlines style.
<div style="position:relative; width:120px; margin:auto;"> adSense code goes here </div>
Don’t forget that the width of the <div> must equal the width of the adSense ad. Now you can center your ads.
