This is pretty weird, a mail I received has the following definitions for the css:
<style type="text/css">
...NL-default {
font-family: "Arial";
font-size: 12px;
color: #000000;
}
...style1 {
font-family: "Arial";
font-size: 12px;
color: #0000FF;
}
...style4 {
text-align: center;
background-color: #F3F3F3;
font-family: "Arial";
font-size: 12px;
color: #000000;
}
...style7 {
text-align: center;
color: #FFFFFF;
background-color: #000080;
font-family: "Arial";
font-size: 12px;
font-weight: bold;
}
...style14 {
font-family: "Arial";
font-size: 14px;
color: #FF3300;
font-weight: bold;
}
Basically all styles have triple periods in front of them.
And it’s applied in a matter like so:
<table style="width: 100%;" class="style41" cellSpacing="1" cellPadding="3">
<tbody><tr>
<td style="width: 233px;" class="style34" strong=""><strong>Notification</strong></td>
I believe most peoples’ first intuition might be.. this won’t work and you’d be right. On Chrome, Firefox and IE9, the CSS isn’t applied to the mail body at all.
However, on IE8, it gets applied perfectly which bewilders me quite a bit. What’s the purpose of putting triple periods in front of your CSS definitions? Why does this work only on IE8?
IE is known to treat leading dots in class selectors as a regular class selector, much like it treats multiple class selectors as only the last in the chain, in quirks mode.
That said… this seems like a really ugly hack. I’m not even sure that it was intended as an IE hack, because the code doesn’t look like it was intended only for IE to use. In that case, I don’t know what the real purpose is of adding leading periods to the mail styles like that.
Also, I’m not sure why the code wouldn’t work in IE9, not even in quirks mode. The following test case definitely makes the text red in all IE versions up to and including 9:
As you may have guessed, this isn’t valid CSS. That’s why it doesn’t work in other browsers, not even in their quirks modes.