title: Outlook 2010 email rendering
body: <p>i am trying to set a global font in an email. The Mail is built using tables to keep compatibility but there is one table that just does not accept my styles. What I have done:</p>
  
  <pre><code>{literal}
  &lt;style&gt;
      *,table, div, p, td, tr, #tabledetails, .tabledetails {
      margin: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif !important;
      color: #000000;
      font-size: 12px;
      }
  &lt;/style&gt;
  {/literal}
  
  ...
  
  &lt;table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;...
  
  &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_quantity} x&lt;/td&gt;
  </code></pre>
  
  <p>So as you see I tried about everything i could to set the font (and not use Times New Roman like Outlook loves to do) but it still doesnt work. What else can i possibly do?</p>
  
  <p>---- edit ----- complete email ----</p>
  
  <pre><code>&lt;link href="{$_system_mail_css}" type="text/css" rel="stylesheet"&gt;
  {literal}
  &lt;style&gt;
  *,table, div, p, td, tr, #tabledetails, .tabledetails {
      margin: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif !important;
      color: #000000;
      font-size: 12px;
  }
  &lt;/style&gt;
  {/literal}
  
  &lt;table cellpadding="0" cellspacing="0" class="email_container" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;"&gt;
      &lt;tr&gt;
          &lt;td colspan="3" class="email_toplogo"&gt;
          &lt;div class="email_toplogo"&gt;&lt;img src="{$_system_logo_url}" /&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="email_table_left_bg" valign="top"&gt;
          &lt;div class="email_table_left"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="email_table_center_bg" valign="top"&gt;
          &lt;div class="email_content"&gt;
          &lt;h1&gt;Hallo {$order_data.delivery_firstname} {$order_data.delivery_lastname},&lt;/h1&gt;
          &lt;p&gt;vielen Dank für Ihre Bestellung im Onlineshop von super cool company name i shouldnt tell anyone ;).
                        Wir werden Ihre Bestellung schnellstmöglich ausführen. Sie bekommen bei jeder Statusänderung Ihrer Bestellung eine automatisch generierte Email.&lt;/p&gt;
                        &lt;hr&gt;
                   &lt;P&gt;Nachfolgend finden Sie Ihre Bestelldetails zur Kontrolle:&lt;/p&gt;
          &lt;p&gt;{txt key=TEXT_ORDER_NUMBER}: {$order_data.orders_id}&lt;/p&gt;
          &lt;p&gt;{txt key=TEXT_ORDER_DATE}: {$order_data.date_purchased}&lt;/p&gt;
  &lt;p&gt;E-Mail: {$order_data.customers_email_address}&lt;/p&gt;
          &lt;table cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"&gt;
          &lt;tr&gt;
          &lt;td style="width: 250px;"&gt;
          &lt;div class="shippingaddress"&gt;
          &lt;h2&gt;{txt key=TEXT_SHIPPING_ADDRESS}&lt;/h2&gt;
          &lt;p&gt;{if $order_data.delivery_company}
          {$order_data.delivery_company}&lt;br /&gt;
          {/if} {$order_data.delivery_firstname} {$order_data.delivery_lastname}&lt;br /&gt;
          {$order_data.delivery_street_address}&lt;br /&gt;
          {if $order_data.delivery_suburb} {$order_data.delivery_suburb}&lt;br /&gt;
          {/if} {$order_data.delivery_postcode} {$order_data.delivery_city}&lt;br /&gt;
          {if $order_data.delivery_state}{$order_data.delivery_state}
          {/if}{$order_data.delivery_country}&lt;br /&gt;
          &lt;/p&gt;
          &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div class="paymentaddress"&gt;
          &lt;h2&gt;{txt key=TEXT_PAYMENT_ADDRESS}&lt;/h2&gt;
          &lt;p&gt;{if $order_data.billing_company} {$order_data.billing_company}&lt;br /&gt;
          {/if} {$order_data.billing_firstname} {$order_data.billing_lastname}&lt;br /&gt;
          {$order_data.billing_street_address}&lt;br /&gt;
          {if $order_data.billing_suburb} {$order_data.billing_suburb}&lt;br /&gt;
          {/if} {$order_data.billing_postcode} {$order_data.billing_city}&lt;br /&gt;
          {if $order_data.billing_state}{$order_data.billing_state}
          {/if}{$order_data.billing_country}&lt;br /&gt;
          &lt;/p&gt;
          &lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
      {if $payment_info}&lt;hr&gt;&lt;h2&gt;{txt key=TEXT_PAYMENT_INFOS}&lt;/h2&gt;
          &lt;p&gt;{$payment_info}&lt;/p&gt;{/if} 
          &lt;hr&gt;
  &lt;table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;
              &lt;tr class="headerrow"&gt;
                  &lt;td class="left"&gt;{txt key=TEXT_QTY}&lt;/td&gt;
                  &lt;td class="left"&gt;{txt key=TEXT_ARTICLE}&lt;/td&gt;
                  &lt;td class="left"&gt;{txt key=TEXT_PRODUCTS_MODEL}&lt;/td&gt;
                  &lt;td class="right"&gt;{txt key=TEXT_SINGLE_PRICE}&lt;/td&gt;
                  &lt;td class="right"&gt;{txt key=TEXT_TOTAL_PRICE}&lt;/td&gt;
              &lt;/tr&gt;
              {foreach name=aussen item=order_values from=$order_products}
              &lt;tr class="{cycle values="contentrow1,contentrow2"}"&gt;
                  &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_quantity} x&lt;/td&gt;
                  &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_name}&lt;/strong&gt;&lt;/td&gt;
                  &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_model}&lt;/td&gt;
                  &lt;td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_price.formated}&lt;/td&gt;
                  &lt;td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;{$order_values.products_final_price.formated}&lt;/td&gt;
              &lt;/tr&gt;
              {$order_values.products_information.html_content}
              {/foreach}
              &lt;tr&gt;
                  &lt;td colspan="5" align="right" class="subtotal"&gt;
                  &lt;div align="right"&gt;
                  &lt;p&gt;{txt key=TEXT_SUB_TOTAL}: {$total.product_total.formated}&lt;/p&gt;
                  {foreach name=aussen item=order_total_values from=$order_total_data}
                  &lt;p&gt;{$order_total_values.orders_total_name}:
                  {$order_total_values.orders_total_price.formated}&lt;/p&gt;
                  {/foreach} {foreach name=aussen item=tax_data from=$total.total_tax}
                  &lt;p&gt;{txt key=TEXT_TAX} {$tax_data.tax_key}%:
                  {$tax_data.tax_value.formated}&lt;/p&gt;
                  {/foreach}
                  &lt;p&gt;&lt;span class="doubleline"&gt;{txt key=TEXT_TOTAL}: {$total.total.formated}&lt;/span&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/div&gt;
  &lt;hr&gt;
          &lt;div class="email_footer"&gt;{$_system_footer_html}&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="email_table_right_bg" valign="top"&gt;
          &lt;div class="email_table_right"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>---- edit 2 ---- the produced code for the product listing part</p>
  
  <pre><code>&lt;table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;
      &lt;tr class="headerrow"&gt;
          &lt;td class="left"&gt;Anzahl&lt;/td&gt;
          &lt;td class="left"&gt;Artikel&lt;/td&gt;
          &lt;td class="left"&gt;Art.Nr.&lt;/td&gt;
          &lt;td class="right"&gt;Einzelpreis&lt;/td&gt;
          &lt;td class="right"&gt;Gesamtpreis&lt;/td&gt;
      &lt;/tr&gt;
                  &lt;tr class="contentrow1"&gt;
          &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;1.00 x&lt;/td&gt;
          &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;Mavic Rennradschuh Zxellium 2011 black / white / yellow mavic&lt;/strong&gt;&lt;/td&gt;
          &lt;td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;14207&lt;/td&gt;
          &lt;td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;&lt;span class="price"&gt; 220,00 EUR&lt;/span&gt;&lt;/td&gt;
          &lt;td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"&gt;&lt;span class="price"&gt; 220,00 EUR&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
              &lt;tr class="contentrow1"&gt;        &lt;td class="right" valign="top"&gt;&lt;/td&gt;        &lt;td class="left" valign="top"&gt;                  &lt;h3&gt;                Schuhgröße:             &lt;/h3&gt;                                           &lt;/td&gt;       &lt;td class="right" valign="top"&gt;&lt;/td&gt;        &lt;td class="right" valign="top"&gt;&lt;/td&gt;        &lt;td class="right" valign="top"&gt;&lt;/td&gt;    &lt;/tr&gt;       &lt;tr class="contentrow1"&gt;        &lt;td class="right" valign="top"&gt;&lt;/td&gt;                        &lt;td class="left" valign="top"&gt;                              42                              &lt;/td&gt;                                       &lt;td class="right" valign="top"&gt; &lt;/td&gt;                           &lt;td class="right" valign="top"&gt;                                                                                                                                         &lt;/td&gt;                               &lt;td class="right" valign="top"&gt;                                                                                 &lt;/td&gt;       &lt;/tr&gt;   
                  &lt;tr&gt;
          &lt;td colspan="5" align="right" class="subtotal"&gt;
          &lt;div align="right"&gt;
          &lt;p&gt;Zwischensumme: &lt;span class="price"&gt; 220,00 EUR&lt;/span&gt;&lt;/p&gt;
                          &lt;p&gt;Nachnahme:
          &lt;span class="price"&gt; 3,60 EUR&lt;/span&gt;&lt;/p&gt;
                          &lt;p&gt;DHL - versichert:
          &lt;span class="price"&gt; 0,00 EUR&lt;/span&gt;&lt;/p&gt;
                          &lt;p&gt;inkl. MwSt. 19%:
          &lt;span class="price"&gt; 35,70 EUR&lt;/span&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;span class="doubleline"&gt;Gesamtsumme: &lt;span class="price"&gt; 223,60 EUR&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>