This email layout and sass files can be used to reproduce this issue https://github.com/Mange/roadie/issues/14

email.sass

/* Client-specific Styles */
#outlook
  // Force Outlook to provide a "view in browser" menu link.
  a
    padding: 0 

body 
  width: 100% !important
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  margin: 0
  padding: 0

// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
.ExternalClass
  // Force Hotmail to display emails at full width
  width: 100% 

  // Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/
  p, span, font, td, div
    line-height: 100%


#backgroundTable
  margin: 0
  padding: 0
  width: 100% !important
  line-height: 100% !important
/* End reset */


// Some sensible defaults for images

img
  outline: none
  text-decoration: none
  -ms-interpolation-mode: bicubic

a img
  border:none

.image_fix
  display: block


// Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag.
p
  margin: 1em 0


// Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags.
h1, h2, h3, h4, h5, h6
  color: black !important

  a
    color: blue !important

    // Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure.
    &:active
      color: red !important

    // Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure.
    &:visited
      color: purple !important


// Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.
table td
  border-collapse: collapse


// Remove spacing around Outlook 07, 10 tables
table
  border-collapse: collapse
  mso-table-lspace: 0pt
  mso-table-rspace: 0pt

.footer_message
  background:
    color: #2b2b2b
    image: url('assets/email/footer_message_background.jpg')
    repeat: repeat-y no-repeat
  color: #8f8f8f
  font-size: 9px
  height: 50px

gistfile1.haml

!!! Strict
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
  %head
    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
    %title= yield :subject
    %link{rel: 'stylesheet', type: 'text/css', href: :email}
    
    = yield :stylesheets
    %style{type: 'text/css'}
      :sass
        // Mobile targetting
        @media only screen and (max-device-width: 480px)
          // For mobile phones in general
          a[href^="tel"], a[href^="sms"]
            text-decoration: none
            color: black
            pointer-events: none
            cursor: default

          .mobile_link
            a[href^="tel"], a[href^="sms"]
              text-decoration: default
              color: orange !important
              pointer-events: auto
              cursor: default
            
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
          // For ipad (tablets, smaller screens, etc)
          a[href^="tel"], a[href^="sms"]
            text-decoration: none
            color: black
            pointer-events: none
            cursor: default
          
          .mobile_link
            a[href^="tel"], a[href^="sms"]
              text-decoration: default
              color: orange !important
              pointer-events: auto
              cursor: default

        @media only screen and (-webkit-min-device-pixel-ratio: 2)
          // For iphone 4(S)

        // Adroid targetting
        @media only screen and (-webkit-device-pixel-ratio:.75)
          // Put CSS for low density (ldpi) Android layouts in here
        
        @media only screen and (-webkit-device-pixel-ratio:1)
          // Put CSS for medium density (mdpi) Android layouts in here
        
        @media only screen and (-webkit-device-pixel-ratio:1.5)
          // Put CSS for high density (hdpi) Android layouts in here
        
        // end Android targeting
        
    / Targeting Windows Mobile
    /[if IEMobile 7]
      <style type="text/css">
      
      </style>
    /

    /[if gte mso 9]
      <style>
      \/* Target Outlook 2007 and 2010 */
      </style>

  %body
    / Wrapper/Container 
    %table#backgroundTable{border: '0', cellpadding: '0', cellspacing: '0'}
      %tr
        %td
          / Content
          %table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
            %tr
              %td{:valign => "top", :width => "88"}
                =image_tag 'email/content_line_left.jpg', class: 'image_fix', width: '88'
              %td{:valign => "top", :width => "424"}
                = yield
              %td{:valign => "top", :width => "88"}
                =image_tag 'email/content_line_right.jpg', class: 'image_fix', width: '88'

          / Bottom
          %table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
            %tr
              %td{:valign => "top", :width => "600"}
                =image_tag 'email/bottom_line.jpg', class: 'image_fix', width: '600', height: '90'

          / Footer
          %table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
            %tr
              %td{:valign => "top", :width => "38"}
                =image_tag 'email/footer_line_left.jpg', class: 'image_fix', width: '38', height: '50'
              %td.footer_message{:valign => "top", :width => "292"}
                = "This email was sent to #{@user.email}. You can always edit your "
                = link_to 'profile', user_url(@user.screen_name, only_path: false)
                to adjust email preferences.
              %td{:valign => "top", :width => "270"}
                =image_tag 'email/footer_line_right.jpg', class: 'image_fix', width: '270', height: '50'

    / End of wrapper table