In my final article I defined why the massive, horizontal hole generally seems in Outlook 2007 and 2010. Sadly the one excellent repair is to stack your tables so that you just by no means have a desk that exceeds 23 inches in top.
One widespread technique for setting a background coloration for all electronic mail shoppers is to create wrapper desk with a width of 100%. This makes it difficult to maintain your tables underneath 23 inches in top – particularly when creating lengthy newsletters. With that stated, right here’s an alternative choice you may think about…
Right here it’s, brief and candy:
<html>
<head>
<type kind="textual content/CSS">
physique, #body_style {
background:#000;
min-height:1000px;
coloration:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
.ExternalClass {width:100%;}
.yshortcuts {coloration: #F00;}
p {margin:0; padding:0; margin-bottom:0;} /*non-obligatory*/
a, a:hyperlink, a:visited {coloration:#2A5DB0;} /*non-obligatory*/
</type>
</head>
<physique type="background:#000; min-height:1000px; coloration:#fff;font-family:Arial, Helvetica, sans-serif;
font-size:12px" alink="#FF0000" hyperlink="#FF0000" bgcolor="#000000" textual content="#FFFFFF">
<span id="body_style" type="padding:15px; show:block">
Insert your physique copy and nested tables right here. <br />
<a href="https://www.emailonacid.com" type="coloration:#F00">www.emailonacid.com</a>
<desk bgcolor="#000000" width="600">
<tr>
<td>Content material</td>
</tr>
</desk>
</span>
</physique>
</html>
Let’s Break this Down…
1.) DOCTYPE
2.) Embedded Physique Properties
<type kind="textual content/CSS">
physique, #body_style {
background:#000;
min-height:1000px;
coloration:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
</type>The “physique” is outlined right here for Yahoo Beta as a result of it doesn’t help your physique tag. As a substitute, it should create a wrapper div round your electronic mail and that div will inherit your embedded physique types.
The “#body_style” is outlined for AOL as a result of it doesn’t help your embedded physique definition nor your physique tag, we’ll use that later as our wrapper.
The “min-height” attribute on this case is used for AOL in order that your background doesn’t get minimize off in case your electronic mail is brief.
Random truth: In the event you embrace any single quotes in your CSS feedback your whole electronic mail will seem clean in Entourage 08. This tidbit had me stumped for fairly some time.
3.) Really useful Default Types
<type kind="textual content/CSS">
.ExternalClass {width:100%;}
.yshortcuts {coloration: #F00;}
p {margin:0; padding:0; margin-bottom:0;} /*non-obligatory*/
a, a:hyperlink, a:visited {coloration:#2A5DB0;} /*non-obligatory*/
</type>The .ExternalClass is used for Hotmail and ensures your electronic mail will take up the whole width of its viewing pane.
The .yshortcuts {coloration: #F00;} is for Yahoo Traditional and Yahoo New. Set this to be the colour you like on your hyperlinks.
By default, I reset the padding and margin for my electronic mail to “0”. This forces me to do all of my spacing inline. This additionally overwrites Hotmail’s default CSS: p {margin:0 0 1.35em}. Since Gmail doesn’t help embedded CSS and it makes use of default browser margins for paragraphs, I at all times embrace a “margin=0” inline as nicely.
From there I do all of my paragraph spacing with padding for just a few causes:
- Hotmail doesn’t help the “margin” nor the “margin-top” properties and
- Outlook 2007 and 2010 provide higher help for padding in block components
Gmail makes use of #2A5DB0 as its default coloration for anchors. That is one other type I don’t permit myself to vary as a result of it forces me to overwrite my hyperlink colours inline.
4.) The Physique Tag
<physique
type="background:#000; min-height:1000px; coloration:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px"
alink="#FF0000"
hyperlink="#FF0000"
bgcolor="#000000"
textual content="#FFFFFF">
I included the type attribute for Gmail, it doesn’t help embedded CSS and can convert this physique tag to a div and preserve its inline types. Because it will get transformed to a div, the opposite physique attributes like bgcolor are ignored.
I included physique attributes (alink, hyperlink, bgcolor and textual content) for Lotus Notes 6.5 and seven, as these shoppers don’t provide a lot help for embedded nor inline CSS.
The “min-height” attribute is ready for Gmail and AOL since they are going to be changing your physique to a div.
5.) The Span Wrapper
<span id="body_style" type="padding:15px; show:block">
This span is working as a wrapper and is required for AOL. You should utilize any inline html ingredient but it surely have to be a regular ingredient. For instance, a customized tag like <aol_body></aol_body> won’t work.
Since Outlook 2007 and 2010 ignore the show:block on this span, it won’t create undesirable horizontal gaps (so long as you shouldn’t have a desk in your electronic mail that exceeds 23 inches in top).
6.) The Desk
<desk bgcolor="#000000" width="600">
<tr>
<td>Content material</td>
</tr>
</desk>
Right here’s the place you’d stack your tables, I threw in a bgcolor and width attribute for the Android Gmail utility. As I’ve talked about many instances prior, Gmail converts your physique to a div, even on cell apps. Since there isn’t any width set in your physique, the Android units the width of your transformed physique tag to that of the gadget viewport. To make an extended story brief, your background coloration will get minimize off except you add it to every of your tables as nicely.
Random truth: Not less than one “<desk” or “<img” textual content string have to be in your HTML code to ensure that Entourage 04 and 08 to course of your embedded and inline CSS. That is particularly essential when you depend on divs solely.
I examined this within the following electronic mail shoppers:
- Android Gmail
- Android Mail
- AOL
- Entourage 04
- Entourage 08
- Gmail
- Hotmail
- iPad
- iPad Gmail
- iPhone
- iPhone Gmail
- Stay Mail
- Lotus Notes 6.5
- Lotus Notes 7
- Lotus Notes 8
- Lotus Notes 8.5
- Mac Mail
- Outlook 2003
- Outlook 2007
- Outlook 2010
- Outlook Categorical
- Thunderbird2
- Thunderbird3
- Home windows Mail
- Yahoo Beta
- Yahoo Traditional
- Yahoo New
