CODEWITHSUNDEEP
htmlcssemailoutlookmjml
Sema
Sema

Reputation: 81

Microsoft Outlook Email border overwriting CSS

I just have a quick question - I'm building out a email template using MJML and for some odd reason, Outlook keeps overwriting the bordering on the template which I don't know why.

MJML:

Ignore the inline styling for now - I will be cleaning up the template later. 

<!-- Start Tenth Section: Groovy -->
<mj-section padding-top="0px" padding-bottom="0px" border-left="1px solid grey" border-right="1px solid grey">
  <mj-column background-color="#FFFFFE" border-bottom="1px solid lightgrey">
    <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://i.imgur.com/b2Lwa6F.png" href="https://www.arturia.com/products/ipad-synths/ispark/overview" alt=""></mj-image>
    <mj-text mj-class="content_section_left content_section_right" >
      <div class="article" mc:repeatable>
        <p mc:edit="article_content">Content</p>
      </div>
    </mj-text>
  </mj-column>
</mj-section>
<!-- End Tenth Section -->

Screenshot:

enter image description here

Outlook:

enter image description here

Any particular thing that I'm doing that causing outlook to render the borders as black? I can't seem to find anything online to help me out

Upvotes: 0

Views: 1367

Answers (1)

nazifa rashid
nazifa rashid

Reputation: 1504

Sometimes on emails templates we face different issues. Sometimes it may can't get styles or you may face rendering issues. If styles on td or table doesn't work then put your styles within style tag, one of that will definitely work. Sometimes it can act differently. Css in style doesn't work but giving that or table or td works. Check what works best for you...If not then !important can be used to force that style shows on outlook clients.

Upvotes: 1

Related Questions