On alpha2 my e-mails would show correctly on all clients: Gmail, Apple Mail OSX, iPhone, iPad, Outlook Express, etc. I noticed that they would NOT show correctly when the CSS Compressor was not enabled. This was a life saver for me because without, my e-mail on all but Gmail would appear 100% of the screen. On Outlook Express it would be about 4000px wide. It was insane.

Later on, without any changes to my knowledge, the orders on the iPhone/iPad began appearing in plain text only. The e-mail was formatted correctly on all other clients.

I happily installed alpha3 because I read that would fix the plain text/html issue, ran update.php as always and tested it out. However, even with CSS Compressor installed, the e-mail is back to appearing 100%. The sort of good news is that the iPhone/iPad is back to displaying html BUT it's appearing 100% rather than being formatted correctly.

I am forced to go back to alpha2 and wait for this issue to be resolved. I hope others have experienced the same thing or someone can direct me to what I am doing wrong.

Background:
I am using Rules to mail to a specific rule based on a form submit. It then uses Mime Mail to process/send the e-mail. I am not using a mail.css file, should I be? All of my css is inline on the body of the e-mail and it shows up perfectly on alpha2 with css compressor enabled on all clients I've test.

I've attached images to show examples of what I am talking about (e.g. correctly formatted and 100% formatted).

Comments

sgabe’s picture

Please provide a mail.css and message source.

interestingaftermath’s picture

I am not using mail.css. Should I be? All of my css is inline.

<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center">
<tbody>
  <tr>
    <td style="padding: 18px 20px 20px;">
      <table width="550" cellspacing="0" cellpadding="0" border="0" align="center">
        <tbody>
          <tr>
            <td valign="bottom" align="left" style="padding-bottom: 8px; padding-left: 2px;">
              <img width="133" height="31" border="0" src="http://drupal.com/files/email/jb_logo_stack.gif" alt="J&B Fleet" style="display: block; margin: 0pt;">
            </td>
            <td valign="bottom" align="right" style="padding-bottom: 8px;">
              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(68, 68, 68); font-size: 20px; line-height: 1em ! important;">Order Notification
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <table width="548" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
        <tbody>
          <tr>
            <td colspan="3">
              <img width="550" height="5" border="0" src="http://drupal.com/files/email/top.gif" alt="" style="display: block; margin: 0pt;">
            </td>
          </tr>
          <tr>
            <td width="1" bgcolor="#e3e3e3" style="font-size: 1px; line-height: 1px;">&nbsp;
            </td>
            <td width="548" bgcolor="#ffffff">
              <table cellspacing="0" cellpadding="0" border="0" align="center">
                <tbody>
                  <tr>
                    <td style="padding: 10px 0pt;">
                      <table width="530" cellspacing="0" cellpadding="0" border="0" align="center">
                        <tbody>
                          <tr>
                            <td align="left" style="padding-left:5px;">
                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 13px; line-height: 0.92em ! important; font-weight: bold;">Order Number: [node:email_order_number_prefix][node:nid]</div>
                                <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1em ! important; font-weight:normal; padding-top:5px;">[node:email_salesman]
                              </div>
                            </td>
                            <td align="right" style="padding-right:5px;">
                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 12px; line-height: 1em ! important;">Ordered on [node:field_date-month] [node:field_date-d], [node:field_date-yyyy]
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="2" style="padding-top: 15px; border-bottom: 1px solid rgb(204, 204, 204); font-size: 1px; line-height: 1px;">&nbsp;
                            </td>
                          </tr>
                          <tr>
                            <td colspan="2" style="padding: 15px 0pt 14px;">
                              <table width="530" cellspacing="0" cellpadding="0" border="0" align="center">
                                <tbody>
                                  <tr>
                                    <td width="265" valign="top">
                                      <table width="265" cellspacing="0" cellpadding="0" border="0" style="padding-left:20px;">
                                        <tbody>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding-right: 5px;">Account #
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em;">[node:field_account_number-raw] 
                                              </div>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding: 5px 5px 0pt 0px;">Company
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0pt;">[node:field_company_name-raw]
                                              </div>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding: 5px 5px 0pt 0px;">Contact
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0pt;">[node:field_contact-raw]
                                                <br>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                    <td width="1" bgcolor="#e5e5e5" style="padding-top: 15px; font-size: 1px; line-height: 1px;">&nbsp;
                                    </td>
                                    <td width="265" valign="top">
                                      <table width="265" cellspacing="0" cellpadding="0" border="0" style="padding-left:20px;">
                                        <tbody>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding-right: 10px; padding: 5px 5px 0pt 0pt;">Sold to
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0px;">[node:field_add_1-raw] [node:field_add_2-raw]
                                                <br>[node:field_city-raw], [node:field_state-raw] [node:field_zip-raw]
                                                <br>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding-right: 10px; padding: 5px 5px 0pt 0pt;">Ship via
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0px;">[node:field_ship_via-raw]
                                              <br>
                                              </div>
                                            </td>
                                          </tr> 
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding-right: 10px; padding: 5px 5px 0pt 0pt;">FOB
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0px;">[node:field_fob-raw]
                                              <br>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="85" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; line-height: 1.45em; font-weight: bold; padding-right: 10px; padding: 5px 5px 0pt 0pt;">PO #
                                              </div>
                                            </td>
                                            <td width="180" valign="top">
                                              <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 10px; line-height: 1.6em; padding: 5px 5px 0pt 0px;">[node:field_cust_order_number-raw]
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                  	<td colspan="3">
                                    	<div style="line-height: 20px; margin-top:15px; padding-left:21px;">
                                    		<span style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 11px; font-weight:bold;">
                                      		Special Instructions<br></span>
                                     		 <span style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 11px;">[node:field_special_instructions-raw]
                                    		</span>
                              			</div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <table width="548" cellspacing="0" cellpadding="0" border="0" align="center">
                        <tbody>
                          <tr>
                            <td valign="top" bgcolor="#2d5e9f" align="left" style="padding: 6px 0pt 8px 20px; background: none repeat scroll 0% 0% rgb(45, 94, 159);">
                              <div style="color: white; font-size: 13px; font-weight: bold; line-height: 1em ! important; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;">Items in This Order
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td valign="top" align="left">
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <table width="530" cellspacing="0" cellpadding="0" border="0" align="center">
                        <tbody>
                        <tr>
						    <td width="10" style="padding-top: 18px; border-bottom: 1px solid #c0c0c0; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;"></td>
						    <td width="450" style="padding-top: 18px; border-bottom: 1px solid #c0c0c0; font-size: 11px; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;">Part Number</td>
						    <td width="75" style="padding-top: 18px; padding-right: 15px; text-align: right; border-bottom: 1px solid #c0c0c0; font-size: 11px; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;">Quantity</td>
						    <td width="25" style="padding-top: 18px; text-align: center; border-bottom: 1px solid #c0c0c0; font-size: 11px; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;">C</td>
						    <td width="75" style="padding-top: 18px; text-align: right; border-bottom: 1px solid #c0c0c0; font-size: 11px; font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif;">Price</td>
						    <td width="10" style="padding-top: 18px; border-bottom: 1px solid #c0c0c0;"></td>
						</tr>
						<?php
							  $rows = '';
							  foreach ($node->field_part_num as $delta => $item) {
							    $rows .= '
							    <tr>
                                <td width="10" style="padding-top: 18px;"></td>
                                ';
							    $rows .= '
							    <td width="450" valign="top" align="left" style="padding-top: 18px;">
                                  <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 12px; line-height: 1em; font-weight: bold;">
                                  ' . $node->field_part_num[$delta]['value'] . '<span style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(102, 102, 102); font-size: 10px; font-weight:normal;"> &nbsp;' . $node->field_description[$delta]['value'] . '</span>
                                  </div>
                                </td>
                                  ';
							    $rows .= '
							    <td width="75" valign="top" align="left" style="padding-top: 18px;">
                                  <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(121, 121, 121); font-size: 11px; line-height: 1.09em; padding-right: 15px; text-align: right;">
                                  ' . $node->field_quantity[$delta]['value'] . ' ' . $node->field_quantity_type[$delta]['value'] . '
                                  </div>
                                </td>
                                ';
							    $rows .= '
							    <td width="25" valign="top" align="right" style="padding-top: 18px;">
                                  <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(121, 121, 121); font-size: 11px; line-height: 1.09em; text-align: center;">
                                  ' . $node->field_c[$delta]['value'] . '
                                  </div>
                                </td>
                                ';
                                $rows .= '
                                <td width="75" valign="top" align="right" style="padding-top: 18px;">
                                  <div style="font-family: Lucida Grande,Lucida Sans,Lucida Sans Unicode,Arial,Helvetica,Verdana,sans-serif; color: rgb(0, 0, 0); font-size: 11px; line-height: 1em; font-weight: bold; text-align: right;">
                                  ' . $node->field_price_decimal[$delta]['value'] . '
                                  </div>
                                </td>
                                <td width="10" style="padding-top: 18px;"></td>
                                </tr>
								';
							  }
							  if ($rows) {
							    print $rows;
							  }
							?>
                           <tr>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td width="1" bgcolor="#e3e3e3" style="font-size: 1px; line-height: 1px;">&nbsp;
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <img width="550" height="6" border="0" src="http://drupal.com/files/email/btm.gif" alt="" style="display: block; margin: 0pt;">
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>
</table>
sgabe’s picture

In short: You should!

If you are not using a custom mail.css in your default theme folder, all the style sheets are used you have which results in:

<table width="100%" [...]>
interestingaftermath’s picture

So, just add a mail.css file? I don't really want to go through and strip out that inline garbage. It took long enough to get it right as is. Writing inline for e-mails really sucks but that's what I am used to doing for html e-mail services.

Are you saying I could have themed the e-mail using a mail.css file instead of inline and mime compresses it before sending?

sgabe’s picture

You should theme the e-mail using a custom mail.css and the CSS Compressor will convert the CSS styles into inline style attributes for you. However you can use an empty mail.css, so your inline formatting stays intact.

interestingaftermath’s picture

Status: Active » Fixed

That did it! I just popped in a mail.css file into my theme folder and alpha3 is working perfectly for my iDevices, Gmail, etc. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.