CODEWITHSUNDEEP
htmlemailoutlook
Shrey Srivastav
Shrey Srivastav

Reputation: 26

<span> border not working in outlook desktop, but works in outlook live and gmail

The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.I

<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; ">
  <tr>
    <td align="right" style="padding: 0; margin: 0">
      <span class="es-button-border" bordercolor="#333" border="1" style=" mso-border-right-alt: 1px solid #333333; mso-border-bottom-alt: 1px solid #333333; mso-border-left-alt: 1px solid #333333; mso-border-top-alt: 1px solid #333333; border-style: solid; border-color: #333333; border-width: 1px; border: 1px solid #333333; display: inline-block; border-radius: 0px; width: auto; "> 
        <span class="es-button" target="_blank" style=" mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center; " >
          <span id="price1">Per person:</span> 
          INR 98298 (CHF 1192)
        </span>
      </span>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 2179

Answers (1)

user2958788
user2958788

Reputation:

The problem is you're using a span as a block element, which it isn't naturally and on top of that - trying to force it with the use of display:inline-block won't always work in Outlook clients.

Your best bet is to use block level elements for borders. These include: table cells & divs. You could convert all of your span tags to divs to make this work, however because divs are block elements, they'll go full width by default. You can define widths to fix this, however Outlook won't respect those without mso specific code.

Below is your code and then the row below that is what I'd do:

<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
  <tr>
    <td align="right">
      <span class="es-button-border" style="border: 1px solid #333333; display: inline-block;"> 
        <span class="es-button" style="mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center;">
          <span id="price1">Per person:</span>INR 98298 (CHF 1192)
        </span>
      </span>
    </td>
  </tr>
  <tr>
    <td style="padding-top:10px;">
      <table align="right" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;">
        <tr>
          <td class="es-button-border" style="text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 12px; line-height: 14px; text-align: center;">
            <div style="border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px;">
              <span id="price1">Per person:</span>INR 98298 (CHF 1192)
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions