The Blackberry mail reader (at least some of the older models like the 8000 series (Pearl, Curve, etc.) seem to have some problems with HTML messages that have tables with backgrounds. Through some careful investigation, I’ve isolated the problem.
Since HTML mail readers tend to not be very good at rendering modern CSS-based designs, we tend to use old-school table layouts for our HTML newsletters. It’s common that we’ll have nested tables, like so:
1 |
<table width="100%" border="0" cellpadding="1" cellspacing="0"><br /><tr><td><br /><table width="100%" border="0" cellpadding="0" cellspacing="0"><br /><tr><br /><td><br />This table shows black text.<br /></td><br /></tr><br /></table><br /></td></tr></table> |
We also sometimes use an old technique to put a thin border around our tables by nesting one table inside another where the outer table has a dark bgcolor and the inner table has a white bgcolor. This is where the Blackberry mail reader has problems:
1 |
<table width="100%" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"><br /><tr><td><br /><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><br /><tr><br /><td><br />This table shows gray text, because of the bgcolor on the parent table.<br /></td><br /></tr><br /></table><br /></td></tr></table><br /> |
Apparently, the Blackberry’s mail reader has logic that automatically inverts the text to a lighter color when it encounters a dark-colored background in a table, and no matter what the bgcolor of the inner table, the font stays that color.
If you need to nest tables like this, you can explicitly set the font color of the text inside the inner table:
1 |
<table width="100%" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"><br /><tr><td><br /><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><br /><tr><br /><td><br /><font color="#000000"><br />This table shows black text, despite the bgcolor on the parent table, because of the font tag.<br /></font><br /></td><br /></tr><br /></table><br /></td></tr></table> |
Or you could do something like this with a single table:
1 |
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" <span class="attribute-name">style</span>=<span class="attribute-value">"border: 1px solid black;"</span>><br /><tr><br /><td><br />This table shows black text, since we use a style attribute instead of a nested table to get our border effect.<br /></td><br /></tr><br /></table> |
While we normally avoid the use of modern <div>-based layouts, many (most?) mail readers will honor a simple inline style like the border for our table.