none
Outlook.com costrains fixed width 150px to all elements RRS feed

  • Question

  • Since a few weeks i am facing an issue with the formatting of all the emails I send to all Microsoft accounts, i.e., Hotmail.com, Outlook.com, etc.

    What I see is that Outlook adds an extra style to my html, in particular a class that automatically sets the width of all the html elements at 150px, making it basically impossible to read and click.

    For exemple:

    .rps_c2c1 * { width: 150px!important; height: auto!important; }

    _rps is the external class added to the div that contains my html. This happens as I have media queries in my code. But that's weird, because the same html was displayed correctly two months ago.

    I really don't know how to face this issue. Outlook support does not help me at all.

    Wednesday, September 20, 2017 2:32 PM

All replies

  • Hi puglina88,

    if you are sending the mails programmatically then I suggest you to share your code.

    we will try to make a test with it and try to reproduce the issue on our side.

    other thing I want to confirm with you that are you using Outlook.com or Outlook Application to send mail?

    I assume that you are using Outlook Application to send mail.

    I try to send mail with VBA and I find that it send the mail correctly and did not change any format of HTML.

    Output:

     

    if misunderstand anything in your above description then try to correct me.

    I will again try to provide you a suggestion.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, September 21, 2017 2:45 AM
    Moderator
  • Hi Deepak,

    I am asking this quesiton for my the company (Facile.it, italy's n1 price comparison platform, >5 mln users). We send our emails with different automatic dispatching platform (Mailchimp, Contactlab, etc...). So, we do not copy/paste our html into an email client.
    We send on average about 10M emails per motnh.

    I tried to investigate, I found out that this "extra style" is only being added when I have my own style into the head tag of the html. The added style is added via Javascript.

    I'd prefer not to show our code on a public forum. Is there a way to talk to you/your team privately?

    You can reach us at:
    - crm@facile.it
    - antonella.puglia@facile.it

    Thank you very much

    Antonella


    Thursday, September 21, 2017 1:08 PM
  • Hi puglina88,

    I can see that you had mentioned that you are using JavaScript. so looks like you are doing Web development.

    so first we need to check code to verify and confirm that the issue falls in our forum or not.

    generally this forum handles VBA Outlook Object Model related issues.

    and it is possible that you are using any other method to send mail from your application.

    if you cannot provide original code then you can try to create simple demo code that can reproduce the issue on our side when we test it.

    currently it is only allowed to post your code here on the forum.

    so try to provide sample code , we will try to check it for you and try to provide you appropriate suggestion based on that.

    further, If the issue is urgent for you then you can generate paid ticket. where you can share your code securely to MSDN Support Engineer. your code will not be shared to any other people and they will try to provide you solution for your issue.

    Reference:

    Microsoft Support

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, September 22, 2017 1:03 AM
    Moderator
  • Hi Deepak Panchal10,

    thank you for your reply.

    No, I am not using Javascript to develop our emails. I mean that outlook.com adds extra style to our HTML via Javascript, so it is impossible for me to prevent the bug.

    This is the piece of code that breaks our templates:

    .rps_c2c1 * { width: 150px!important; height: auto!important; }

    This is the whole code that Outlook.com displays:

    <div class="rps_75ff">
    <style type="text/css">
    <!-- .rps_75ff #x_outlook a
    { padding: 0; }
    .rps_75ff .x_ReadMsgBody
    { width: 100%; }
    .rps_75ff .x_ExternalClass
    { width: 100%; line-height: 100%; background: #d7d7d7; min-width: 600px!important; }
    .rps_75ff .x_forceWidth
    { width: 600px!important; }
    .rps_75ff .x_forceWidth .x_tableDX
    { width: 280px!important; }
    .rps_75ff .x_ExternalClass .x_forceWidth
    { width: 600px!important; }
    .rps_75ff bodyx_[w8f] .x_forceWidth
    { width: 600px!important; }
    .rps_75ff .x_ExternalClass, .rps_75ff .x_ExternalClass p, .rps_75ff .x_ExternalClass span, .rps_75ff .x_ExternalClass font, .rps_75ff .x_ExternalClass td, .rps_75ff .x_ExternalClass div
    { line-height: 100%; }
    .rps_75ff bodyx_[class=w8f] .x_mainTable
    { width: 600px!important; min-width: 600px!important; max-width: 600px!important; }
    .rps_75ff bodyx_[class=w8f] .x_tableDX
    { float: right; }
    .rps_75ff bodyx_[class=w8f] .x_tableSX
    { float: left; }
    .rps_75ff bodyx_[class=w8f] .x_phoneText
    { text-align: right!important; }
    .rps_75ff bodyx_[class=w8f]
    { background-color: #e8e8e8; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 14px; width: 100%!important; margin: 0; padding: 0; }
    .rps_75ff bodyx_[class=w8f] img
    { border: 0; max-width: 100%; }
    .rps_75ff bodyx_[class=w8f] a img
    { border: none; }
    .rps_75ff bodyx_[class=w8f] table td
    { border-collapse: collapse; }
    .rps_75ff bodyx_[class=w8f] .x_datiContainer
    { display: block!important; float: none!important; height: 100%!important; width: 100%!important;  }
    .rps_75ff bodyx_[class=w8f] .x_rightImage
    { width: 150px!important; height: 150px!important; border: 5px solid red!important; }
    .rps_75ff bodyx_[class=w8f] .x_tablePrezziDx .x_btn
    { float: right; }
    .rps_75ff *
    { width: 600px!important; }
    .rps_75ff *
    { display: block!important; float: none!important; height: 100%!important; width: 100%!important;  }
    .rps_75ff *
    { width: 150px!important; height: auto!important; }
    .rps_75ff iframe.x_attachment, .rps_75ff iframe.x_attachment-pdf
    { border: 10px solid transparent!important; width: 40%!important; float: left!important; }
    .rps_75ff imgx_[class=banner]
    { width: 100%!important; height: auto!important; max-width: 100%; }
    .rps_75ff .x_overflowing, .rps_75ff .x_overflowing *
    { border-color: gold!important; color: gold!important; font-size: 8px!important; outline: none!important; display: none!important; }
    .rps_75ff .x_inner_image .x_snow
    { content: ''; background: none; font-family: Androgyne; height: 100%;   width: 100%;  }
    --></style>
    <div>
    <div class="...">EMAIL CONTENT</div>
    </div>
    </div>
    Outlook.com puts our HTML into a div with 150px width. And this happens when I have @media queries in our own <style>. If I remove media queries the bug disappears. But this is not a solution. I can't definitively remove media queries from our code.

    The bug started a few weeks ago. The exactly same code did not create any kind of problem before.

    Hope to hear from you soon,

    Regards

    Antonella


    Friday, September 22, 2017 8:23 AM
  • Hi Antonella,

    >> I found out that this "extra style" is only being added when I have my own style into the head tag of the html. The added style is added via Javascript.

    What do you mean by this? To avoid sharing sensitive information, I would suggest you create a new simple demo which could reproduce your issue, and then share us it through OneDrive.

    There is no private channel to provide support on this forum. If you need private channel, we could share us the phone, but it will be charged if your issue is not a bug from Office product.

    Best Regards,

    Edward


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, September 25, 2017 5:43 AM
  • Hi Edward,

    I mean that outlook.com adds extra style to our HTML, so it is impossible for me to prevent the bug.

    This is the piece of code that breaks our templates:

    .rps_c2c1 * { width: 150px!important; height: auto!important; }

    This is the whole code that Outlook.com displays:

    <div class="rps_75ff">
    <style type="text/css">
    <!-- .rps_75ff #x_outlook a
    { padding: 0; }
    .rps_75ff .x_ReadMsgBody
    { width: 100%; }
    .rps_75ff .x_ExternalClass
    { width: 100%; line-height: 100%; background: #d7d7d7; min-width: 600px!important; }
    .rps_75ff .x_forceWidth
    { width: 600px!important; }
    .rps_75ff .x_forceWidth .x_tableDX
    { width: 280px!important; }
    .rps_75ff .x_ExternalClass .x_forceWidth
    { width: 600px!important; }
    .rps_75ff bodyx_[w8f] .x_forceWidth
    { width: 600px!important; }
    .rps_75ff .x_ExternalClass, .rps_75ff .x_ExternalClass p, .rps_75ff .x_ExternalClass span, .rps_75ff .x_ExternalClass font, .rps_75ff .x_ExternalClass td, .rps_75ff .x_ExternalClass div
    { line-height: 100%; }
    .rps_75ff bodyx_[class=w8f] .x_mainTable
    { width: 600px!important; min-width: 600px!important; max-width: 600px!important; }
    .rps_75ff bodyx_[class=w8f] .x_tableDX
    { float: right; }
    .rps_75ff bodyx_[class=w8f] .x_tableSX
    { float: left; }
    .rps_75ff bodyx_[class=w8f] .x_phoneText
    { text-align: right!important; }
    .rps_75ff bodyx_[class=w8f]
    { background-color: #e8e8e8; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 14px; width: 100%!important; margin: 0; padding: 0; }
    .rps_75ff bodyx_[class=w8f] img
    { border: 0; max-width: 100%; }
    .rps_75ff bodyx_[class=w8f] a img
    { border: none; }
    .rps_75ff bodyx_[class=w8f] table td
    { border-collapse: collapse; }
    .rps_75ff bodyx_[class=w8f] .x_datiContainer
    { display: block!important; float: none!important; height: 100%!important; width: 100%!important;  }
    .rps_75ff bodyx_[class=w8f] .x_rightImage
    { width: 150px!important; height: 150px!important; border: 5px solid red!important; }
    .rps_75ff bodyx_[class=w8f] .x_tablePrezziDx .x_btn
    { float: right; }
    .rps_75ff *
    { width: 600px!important; }
    .rps_75ff *
    { display: block!important; float: none!important; height: 100%!important; width: 100%!important;  }
    .rps_75ff *
    { width: 150px!important; height: auto!important; }
    .rps_75ff iframe.x_attachment, .rps_75ff iframe.x_attachment-pdf
    { border: 10px solid transparent!important; width: 40%!important; float: left!important; }
    .rps_75ff imgx_[class=banner]
    { width: 100%!important; height: auto!important; max-width: 100%; }
    .rps_75ff .x_overflowing, .rps_75ff .x_overflowing *
    { border-color: gold!important; color: gold!important; font-size: 8px!important; outline: none!important; display: none!important; }
    .rps_75ff .x_inner_image .x_snow
    { content: ''; background: none; font-family: Androgyne; height: 100%;   width: 100%;  }
    --></style>
    <div>
    <div class="...">EMAIL CONTENT</div>
    </div>
    </div>

    Outlook.com puts our HTML into a div with 150px width. And this happens when I have @media queries in our own <style>. If I remove media queries the bug disappears. But this is not a solution. I can't definitively remove media queries from our code.

    Is this helpful? If not we'll be happy to schedule a paied support session via phone.

    You can reach us at:
    - crm@facile.it
    - antonella.puglia@facile.it

    thanks and best,
    Antonella

    Wednesday, September 27, 2017 2:04 PM
  • Hi puglina88,

    Could you share us detail steps to reproduce your issue step by step? I do not know how you used this piece code and templates.

    What is your project type and do you develop with Outlook VSTO AddIn or Outlook Addin?

    Best Regards,

    Edward


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, September 28, 2017 2:15 AM
  • Hi Edward Z,

    I do not use any Outlook AddIn to develop my email. I send my emails through Mailchimp. I copy and paste my html into the editor of Mailchimp and then I send it to every email address in my contact list of users.

    My list also contains hotmail, live, outlook (etc..) email addresses.

    The email is created by a simple html code with <style> in the <head>.
    This style contains CSS @media queries rules, to rule mobile responsiveness of my template on variuous mobile devices.

    Since a few weeks, my template is completely broken on outlook: I found out that if I remove these rules (@media queries) the bug disappears, even if exactly the same rules where working ok on outlook since no more than one month ago.

    I do not want to remove those media queries in order not to compromise mobile performance of my templates.

    The only code I send to my contacts is the following (I remove the content tables because of the characters constraint):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><meta content="text/html;charset=utf-8" http-equiv="Content-Type"/><meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><title>È arrivato l’autunno: risparmia su RC auto, gas e luce</title><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><style>
    @media screen and (orientation: landscape) {body[class=w8f] .rowApp {display:none!important}}
    #outlook a{padding:0;}.ReadMsgBody{width:100%;}.ExternalClass {width:100%;line-height: 100%;background:#d7d7d7;min-width:600px !important;}.forceWidth {width:600px!important;} /*yahoo*/.forceWidth .tableDX {width:280px!important;}.ExternalClass .forceWidth {width:600px!important;} /*outlook*/body[w8f] .forceWidth {width:600px!important;} /*airmail*/.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}table,td{}img{-ms-interpolation-mode:bicubic;-webkit-transform-style: preserve-3d;}body[class=w8f] .mainTable {width: 600px !important;min-width:600px !important;max-width: 600px !important;}body[class=w8f] .tableDX {float: right;}body[class=w8f] .tableSX {float: left;}body[class=w8f] .phoneText {text-align: right !important;}body[class=w8f] {background-color: #e8e8e8;color: #000000;font-family: Arial, Helvetica, sans-serif;font-size: 14px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;width: 100%!important;margin: 0;padding: 0;}body[class=w8f] img {border: 0;-ms-interpolation-mode: bicubic;max-width: 100%;}body[class=w8f] a img {border: none;}body[class=w8f] table td {border-collapse: collapse;}body[class=w8f] .datiContainer {display:block !important;float:none !important;height:100% !important;width:100% !important;overflow:normal !important;}body[class=w8f] .rightImage {width:150px !important;height: 150px !important;border: 5px solid red !important;}body[class=w8f] .tablePrezziDx .btn {float: right;}@media screen and (-webkit-min-device-pixel-ratio:0) {body[class=w8f] .fasciaGrigia .tableDX {margin-left: 0px !important;margin-top: 0px !important;}} @media screen and (max-width:590px), screen and (max-width:504px) and (orientation:portrait) {body[class=w8f] {background: #cccccc !important;-webkit-font-smoothing: antialiased !important;}body[class=w8f] table.row {-webkit-box-shadow: 0 5px 13px -5px rgba(0,0,0,1);box-shadow: 0 5px 13px -5px rgba(0,0,0,1);margin-bottom:15px;border-radius: 0 0 3px 3px !important;}body[class=w8f] {background: #cccccc;}body[class=w8f] .mainTable {border-top:0!important;background: #cccccc;background: -moz-linear-gradient(left,  #cccccc -1%, #cccccc 0%, #eeeeee 50%, #cccccc 100%) !important;background: -webkit-gradient(linear, left top, right top, color-stop(-1%,#cccccc), color-stop(0%,#cccccc), color-stop(50%,#eeeeee), color-stop(100%,#cccccc)) !important;background: -webkit-linear-gradient(left,  #cccccc -1%,#cccccc 0%,#eeeeee 50%,#cccccc 100%) !important;background: -o-linear-gradient(left,  #cccccc -1%,#cccccc 0%,#eeeeee 50%,#cccccc 100%) !important;background: -ms-linear-gradient(left,  #cccccc -1%,#cccccc 0%,#eeeeee 50%,#cccccc 100%) !important;background: linear-gradient(to right,  #cccccc -1%,#cccccc 0%,#eeeeee 50%,#cccccc 100%) !important;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );}body[class=w8f] .viewOnlineContainer {background: none!important;padding-bottom:10px;text-align:center!important;}body[class=w8f] .datiContainer {display:none !important;}body[class=w8f] .onlyMobile {background-color: transparent!important;display: block!important;float: none!important;height: auto!important;line-height: normal !important;line-height: auto !important;width: 100%!important;border: 0!important;overflow: visible!important;max-height: 100%!important;font-size: normal!important;}body[class=w8f] h1.title, body[class=w8f] .title {font-size:18px !important;}body[class=w8f] .mainTable {max-width: 100% !important;min-width: 100% !important;width: 100% !important;max-width: 350px !important;min-width: 300px !important;xwidth: 300px !important;border-right:10px solid transparent;border-top:10px solid #cccccc;border-left:10px solid transparent;margin: 0 auto !important;padding: 0;}body[class=w8f] .forceWidth {display:none!important;}body[class=w8f] .tableDX, body[class=w8f] .tableSX {float: none !important;width: 100% !important;max-width: 100% !important;}body[class=w8f] .tableDX {margin-left: 0px !important;}body[class=w8f] .fasciaGrigia {overflow:hidden;border-radius: 4px !important;}body[class=w8f] .fasciaGrigia .tableDX {margin-left: 0px !important;margin-top: 0px !important;-webkit-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;}body[class=w8f] .fasciaGrigia .tableSX {-webkit-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0;}body[class=w8f] .hDivider {height: 10px !important;}body[class=w8f] .hDividerHalf {height: 10px !important;}body[class=w8f] .hDividerSingle {height: 10px !important;}body[class=w8f] .hDividerDouble {height: 25px !important;}body[class=w8f] .hide, body[class=w8f] table[class=row] img.hide, body[class=w8f] td.hide, body[class=w8f] table[class=row] td.hide, body[class=w8f] table[class=row] span.hide {display: none!important;}body[class=w8f] .phoneTextContainer {margin-right: 0 !important;text-align: right !important;border-right: 6px solid #FFFFFF !important;border-top: 10px solid #FFFFFF !important;border-bottom: 6px solid #FFFFFF !important;}body[class=w8f] .phone .onlyMobile {display: block !important;font-size: 20px !important;font-weight:bold !important;}body[class=w8f] .logoContainer,body[class=w8f] .logoContainer img {margin: 0 auto!important;display: block!important;text-align: center !important;}body[class=w8f] .logoContainer {text-align: left !important;}body[class=w8f] .logoContainer img {height: auto !important;width: 210px !important;max-width: 210px !important;float:none !important;}body[class=w8f] .header .tableSX {width: 100% !important;float: left !important;}body[class=w8f] .header .tableDX {width: auto !important;float: right !important;}body[class=w8f] .mainTitle {display:block!important;}body[class=w8f] td[class=title] {font-size: 18px!important;line-height: normal!important;font-weight: bold!important;padding: 8px!important;}body[class=w8f] .btnContainer,body[class=w8f] .btnContainerTel {width:100% !important;display:table!important;}body[class=w8f] .btnContainer .btnFascia a,body[class=w8f] .btnContainerTel .btnFascia a {font-size:16px !important;border:0 !important;padding-left:8px !important;line-height: 29px !important;display:block !important;text-shadow: 0 -1px 1px #07A305;text-shadow: 0 1px 1px #07A305;height: 27px !important;}body[class=w8f] .btnContainerTel .btnFascia a {text-shadow: 0 -1px 1px #0669BA;text-shadow: 0 1px 1px #0669BA;}body[class=w8f] .footer {text-align: left !important;padding: 10px !important;line-height:11px !important;border:0!important;letter-spacing: -0.04em !important;}body[class=w8f] .padder {border: 5px solid #FFFFFF !important;}body[class=w8f] .padder.promo {border: 5px solid #FEF7D0 !important;background: #FEF7D0 !important;} .padder.promo-viola {border: 5px solid #E3ECF4 !important;background: #E3ECF4 !important;} body[class=w8f] .tableBlockContainer.noBorder,body[class=w8f] .tableBlockContainer.noBorder .padder {border: 0px !important;}body[class=w8f] .imageContainer {width:100% !important;overflow: hidden !important;}body[class=w8f] .imageContainer img {width:98% !important;height:auto !important;border:none !important;margin: 3px auto!important;}body[class=w8f] table#otherproducts .hDividerDouble {display:none !important;}body[class=w8f] table#otherproducts .product td.singleProduct {display: block!important;width: 100%!important;padding: 10px 0!important;border-bottom: 1px dotted silver;}body[class=w8f] table#otherproducts .product td.singleProduct:first-child {padding-top:5px !important;}body[class=w8f] table#otherproducts .product td.singleProduct:last-child {border:none !important;padding-bottom: 5px !important;}body[class=w8f] table#otherproducts tr.imgTR {display:none !important;}body[class=w8f] table#otherproducts tr.txtTR {width: 65% !important;display: block;float: left;}body[class=w8f] table#otherproducts tr.txtTR .boxProductText div {text-align:left!important;font-size:14px !important;line-height: 16px!important;}body[class=w8f] table#otherproducts tr.btnTR {width: auto !important;display: block;float: right;margin: 0 !important;margin-right: 10px !important;}body[class=w8f] table#otherproducts tr.btnTR td.boxProductBtn table {background:none;white-space: normal !important;width: 70px !important;min-width: 70px !important;max-width: 70px !important;float:right !important;xmargin-left:15px;border-radius:4px!important;overflow:hidden!important;}body[class=w8f] table#otherproducts tr.btnTR td.boxProductBtn td {border: none !important;}body[class=w8f] table#otherproducts tr.btnTR td.boxProductBtn td.ProductBtn a {background: #71b62c;color: #ffffff!important;font-size: 10px;font-weight: bold;display: inline-block !important;line-height: 12px !important;margin-right: 0px!important;padding: 7px 0px !important;padding-left: 13px !important;;text-align: left;text-shadow: 0 1px 1px #057104;text-transform: uppercase;top: 0px;}body[class=w8f] table#otherproducts tr.btnTR td.boxProductBtn td.ProductBtn a span {font-size: 20px;;top: 10px;right: 5px;font-family: arial;}body[class=w8f] table#otherproducts .product table tbody tr div.productText,body[class=w8f] table#otherproducts .product table tbody tr div.productTitle {text-align: left;display: block!important;width: 98%!important;padding: 0 10px!important;}body[class=w8f] table#otherproducts .product table tbody tr div.productTitle a {display: block !important;font-weight:bold !important;margin-bottom: 7px !important;}body[class=w8f] table#otherproducts .product table tbody tr td.boxProductText {font-size: 14px!important;line-height: 18px!important;padding: 0!important;}body[class=w8f] table#otherproducts .product table tbody tr td {font-size: 18px!important;font-weight: normal!important;padding: 0px!important;white-space: normal !important;}body[class=w8f] table#otherproducts .product:first-child {border-bottom:5px solid white!important;}body[class=w8f] .tableBlockContainer .titleNews div a {font-size:19px !important;line-height:20px !important;}body[class=w8f] .tableBlockContainer .titleNews div a br {display:none!important;}body[class=w8f] .tableBlockContainer .sottotitolo {font-size:16px !important;line-height:20px !important;}body[class=w8f] .tableBlockContainer .textPlain,body[class=w8f] .tableBlockContainer .textPlain * {font-size: 16px!important;line-height: 19px!important;}body[class=w8f] .tableBlockContainer .sectionTitle {font-size:19px !important;line-height:20px !important;}body[class=w8f] .readMoreForce {display:block;width:100%;text-align:right;margin:10px 0}body[class=w8f] .tableBlockContainer .textPlain .readMore {display: none !important;}body[class=w8f] .promoTitle {border:0 !important;margin-bottom: 5px !important;}body[class=w8f] .btnContainer.boxPromo {border-right: 5px solid #FEF7D0;}body[class=w8f] .rowApp {z-index:9999;;bottom: 0;left: 0;display: table!important;float: none!important;height: auto!important;width: 100%!important;min-width:320px;max-width:700px;border: 0!important;overflow: visible!important;background-color: #F2F2F2!important;-webkit-box-shadow:inset 0 -44px 0 0 #F9F9F9,inset 0 1px 0 0 rgba(0,0,0,0.1);box-shadow:inset 0 -44px 0 0 #F9F9F9,inset 0 1px 0 0 rgba(0,0,0,0.1);}body[class=w8f] .rowApp img {max-width: 320px!important;margin: 0 auto;display: block;;}body[class=w8f] .rowApp a {-webkit-tap-highlight-color: rgba(0,0,0,0.2);}body[class=w8f] .rowApp .oneFromTwo {display: table-cell!important;width: 50%!important;height: auto!important;overflow: visible!important;background: none!important;}body[class=w8f] .rowApp .oneFromTwo img {-webkit-backface-visibility: hidden;-webkit-transform:translate3d(0,0,0);display: inline!important;height: 57px!important;width: 160px!important;overflow: visible!important;}body[class=w8f] .footer {padding-bottom:140px !important;}body[class=w8f] .forceBTN {width: 290px!important;}body[class=w8f] .mezzoPixel {border-width: 0.5px !important;}body[class=w8f] .imageContainer {}body[class=w8f] .onlyMobile {background-color: transparent!important;display: block!important;float: none!important;height: auto!important;width: 100%!important;border: 0!important;overflow: visible!important;max-height: 100%!important;font-size: normal!important;}body[class=w8f] .diagonalRibbon { !important;height: 15px !important;width: 100% !important;overflow: hidden !important;display: block !important;text-align: center !important;background: #E34713 !important;color: white !important;font-weight: bold !important;padding: 3px 0 !important;overflow: hidden !important;}body[class=w8f] .marquee {width: 100% !important;display: block !important;margin: 0 auto !important; !important;overflow: hidden !important;white-space: nowrap !important;box-sizing: border-box !important;animation: marquee 10s ease-in-out infinite !important;}@keyframes marquee {0% {opacity:0;left: 100%;letter-spacing: 3px} 20%,80% {opacity:1;left: 0%;letter-spacing: 0px} 100% {opacity:0;left: -100%;letter-spacing: 3px}}.roundedBottom {overflow:hidden !important;-webkit-border-radius: 0 0 4px 4px!important;border-radius: 0 0 4px 4px!important;box-shadow: 0 10px 10px -10px rgba(0,0,0,0.35),0 10px 5px -10px rgba(0,0,0,0.2),0 5px 5px -5px rgba(0,0,0,1),0 7px 35px -8px rgba(0,0,0,1.3);}.mcnTextContentContainer {width:100%!important;} .mcnTextContentContainer td {line-height:100%!important}}
    @media screen and (orientation: landscape) {body[class=w8f] .rowApp {display:none!important}}
    * [lang~="x-divbox"] {width:600px !important;}* [lang~="x-datiContainer"] {display:block !important;float:none !important;height:100% !important;width:100% !important;overflow:normal !important;}* [lang~="x-rightImage"] {width:150px !important;height:auto !important;}iframe.attachment,iframe.attachment-pdf {border:10px solid transparent !important;width:40% !important;float:left !important;}img[class=banner] {width: 100%!important;height: auto!important;max-width: 100%;}
    .element-animation {-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */animation-delay: 1s;animation: animationFrames linear 1.5s;animation-iteration-count: 2;transform-origin: 50% 50%;-webkit-animation: animationFrames linear 1.5s;-webkit-animation-iteration-count: 2;-webkit-transform-origin: 50% 50%;-moz-animation: animationFrames linear 1.5s;-moz-animation-iteration-count: 2;-moz-transform-origin: 50% 50%;-o-animation: animationFrames linear 1.5s;-o-animation-iteration-count: 2;-o-transform-origin: 50% 50%;-ms-animation: animationFrames linear 1.5s;-ms-animation-iteration-count: 2;-ms-transform-origin: 50% 50%;}
    @keyframes animationFrames{0% {transform: translate(0px,0px);}8% {transform: translate(5px,0px);}17% {transform: translate(-5px,0px);}25% {transform: translate(3px,0px);}33% {transform: translate(-3px,0px);}41% {transform: translate(0px,0px);}100% {transform: translate(0px,0px);}}@-moz-keyframes animationFrames{0% {-moz-transform: translate(0px,0px);}8% {-moz-transform: translate(5px,0px);}17% {-moz-transform: translate(-5px,0px);}25% {-moz-transform: translate(3px,0px);}33% {-moz-transform: translate(-3px,0px);}41% {-moz-transform: translate(0px,0px);}100% {-moz-transform: translate(0px,0px);}}@-webkit-keyframes animationFrames {0% {-webkit-transform: translate(0px,0px);}8% {-webkit-transform: translate(5px,0px);}17% {-webkit-transform: translate(-5px,0px);}25% {-webkit-transform: translate(3px,0px);}33% {-webkit-transform: translate(-3px,0px);}41% {-webkit-transform: translate(0px,0px);}100% {-webkit-transform: translate(0px,0px);}}@-o-keyframes animationFrames {0% {-o-transform: translate(0px,0px);}8% {-o-transform: translate(5px,0px);}17% {-o-transform: translate(-5px,0px);}25% {-o-transform: translate(3px,0px);}33% {-o-transform: translate(-3px,0px);}41% {-o-transform: translate(0px,0px);}100% {-o-transform: translate(0px,0px);}}@-ms-keyframes animationFrames {0% {-ms-transform: translate(0px,0px);}8% {-ms-transform: translate(5px,0px);}17% {-ms-transform: translate(-5px,0px);}25% {-ms-transform: translate(3px,0px);}33% {-ms-transform: translate(-3px,0px);}41% {-ms-transform: translate(0px,0px);}100% {-ms-transform: translate(0px,0px);}}
    .overflowing,.overflowing * {border-color:gold !important;color:gold !important;font-size:8px !important;outline: none  !important;display: none !important;}.tada {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: tada;animation-name: tada;-webkit-animation-delay: 7s;animation-delay: 7s;}
    .inner_image {}.inner_image .snow {content: '';-webkit-transform: translate3d(0, 0, 0);pointer-events: none!important;background: none;font-family: Androgyne;background-image:   url('https://facile-newsletter.s3.amazonaws.com/template/christmas_assets/snow_white1.png'),                    url('https://facile-newsletter.s3.amazonaws.com/template/christmas_assets/snow_white3.png');height: 100%;left: 0;;top: 0;width: 100%;z-index:0;-webkit-animation: snow 10s linear infinite;-moz-animation: snow 10s linear infinite;-ms-animation: snow 10s linear infinite;animation: snow 10s linear infinite;}
    @keyframes snow { 0% {background- 0px, 0px 0px, 0px 0px;} 50% {background- 500px, 100px 200px, -100px 150px;} 100% {background- 1000px, 200px 400px, -100px 300px;}}@-moz-keyframes snow {0% {background- 0px, 0px 0px, 0px 0px;} 50% {background- 500px, 100px 200px, -100px 150px;} 100% {background- 1000px, 200px 400px, 100px 300px;}@-webkit-keyframes snow {0% {background- 0px, 0px 0px, 0px 0px;} 50% {background- 500px, 100px 200px, -100px 150px;} 100% {background- 1000px, 200px 400px, -100px 300px;}}@-ms-keyframes snow {0% {background- 0px, 0px 0px, 0px 0px;} 50% {background- 500px, 100px 200px, -100px 150px;} 100% {background- 1000px, 200px 400px, -100px 300px;}}
    @media screen and (orientation: landscape) {body[class=w8f] .rowApp {display:none!important}}
    </style><link rel="apple-touch-icon" sizes="57x57" href="http://www.facile.it/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="http://www.facile.it/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="http://www.facile.it/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="http://www.facile.it/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="http://www.facile.it/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="http://www.facile.it/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="http://www.facile.it/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="http://www.facile.it/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="http://www.facile.it/apple-touch-icon-180x180.png"><link rel="icon" type="image/png" href="http://www.facile.it/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="http://www.facile.it/android-chrome-192x192.png" sizes="192x192"><link rel="icon" type="image/png" href="http://www.facile.it/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="http://www.facile.it/favicon-16x16.png" sizes="16x16"></head>
    <body style="margin:0;padding:0;background:#d7d7d7"><div id="deviceSize"></div><div style="overflow:hidden;width:0px;float:right;max-height:0px;font-size:1px;line-height:0px;color:#e8e8e8;;">L&rsquo;autunno &egrave; la stagione del risparmio: scopri le ultime offerte per tagliare le tue spese!</div><!--[if !mso]><!--><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#d7d7d7;width:100%;border-collapse:collapse" lang="x-divbox" ><!--<![endif]--><!--[if gte mso 9]><table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#d7d7d7;width:600;border-collapse:collapse" lang="x-divbox"><![endif]--><tr><td align="center" valign="middle"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:590px;border:5px solid transparent;border-bottom:0;border-top:0;padding:0;border-collapse:collapse"><tr><td align="right"><div style="width:300px;color:white;text-align:center;clear:both;margin:0 auto;display:block;height:10px;font-size:1px;line-height:10px;" lang="x-divbox">&zwj;</div>
    </td></tr>	<tr><td>
    	<div style="border:5px solid transparent;text-align:right;background:transparent;">			<span style="font-family: Arial, Helvetica, sans-serif;font-size:9px;color:#999;">Se non visualizzi correttamente la newsletter <a href="${online_version_url}$" style="color:#999;font-size:9px!important;text-decoration:underline">clicca qui</a></span>	</div>
    	</td></tr></table><div><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#FFFFFF;max-width:590px;min-width:290px;border:5px solid #FFFFFF;padding:0;border-collapse:collapse"><tr><td align="left" valign="middle"><table cellpadding="0" cellspacing="0" style="float:left;" align="left"><tr><td align="left"><!--[if gte mso 9]><table width="186" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"><tr>    <td width="186">    <style>body[class=w8f] .logoHeader{width:186px!important;}</style><![endif]--><a href="http://www.facile.it/?utm_campaign=CRM&utm_medium=NL_SET_4_A&utm_source=CRM-NL&utm_term=Home&utm_content=NL_autunno_A_*|IF:P_PROSP|*1*|ELSE:|*0*|END:IF|**|IF:P_CLIEN|*1*|ELSE:|*0*|END:IF|**|IF:P_DEM|*1*|ELSE:|*0*|END:IF|*-*|IF:ADSL_PROSP|*2*|ELSE:|*0*|END:IF|**|IF:ADSL_CLIEN|*2*|ELSE:|*0*|END:IF|**|IF:ADSL_DEM|*2*|ELSE:|*0*|END:IF|*-*|IF:M_PROSP|*3*|ELSE:|*0*|END:IF|**|IF:M_CLIEN|*3*|ELSE:|*0*|END:IF|**|IF:M_DEM|*3*|ELSE:|*0*|END:IF|*-*|IF:E_PROSP|*4*|ELSE:|*0*|END:IF|**|IF:E_CLIEN|*4*|ELSE:|*0*|END:IF|**|IF:E_DEM|*4*|ELSE:|*0*|END:IF|*&${link_facile_consensi}$"><img src="https://s3.eu-central-1.amazonaws.com/facile-newsletter/template/logo_3x_ff6600.png" width="186" height="53" style="max-width:186px;display:block;margin:0;padding:0;float:left;border:10px solid white;height:auto!important" border="0" align="left" alt="Facile.it" /></a><!--[if gte mso 9]>    </td></tr></table><![endif]--></td></tr></table><table cellpadding="0" cellspacing="0" style="float:right;" align="right" hide" width="18%"><tr><td align="right" nowrap style="text-align:right;"><div style="border-right:5px solid #FFFFFF;border-top:10px solid #FFFFFF"><div style="font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:100%;color:#2c8fd6;"><span style="color:#ff6600;text-decoration:none; cursor: text;letter-spacing:-1px!important;word-spacing:-0.06em;white-space:nowrap"><span style="white-space:nowrap">02.55.55.1<!--<sup><small>*</small></sup>--></span></span></div><span style="font-family:Arial,Helvetica,sans-serif;color:#aeaeae;font-size:10px;line-height:11px;white-space:nowrap"><span>Lun&zwj;-Sa&zwj;b 9.00-21.00</span></span></div></td></tr></table>
    </td></tr></table>
    
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF600" style="background:#FF6600;max-width:590px;min-width:290px;padding:0">
    <tr bgcolor="#FF600" style="background:#FF6600"><td height="4" bgcolor="#FF600" style="background:#FF6600;font-size:1px;line-height:1px;height:4px">&nbsp;</td></tr></table>
    
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#FFFFFF;max-width:590px;min-width:290px;border:5px solid #FFFFFF">
    	<tr>
    		<td align="center">
    			<table width="100%" cellpadding="0" cellspacing="0" style="background:#FFFFFF;">
    			<tr>
    			<td align="left">
    			<div style="border:8px solid #FFFFFF;font-family:Helvetica, Arial, sans-serif;text-align:left">				<div style="margin:0;font-size:22px;font-family:Helvetica, Arial, sans-serif;color:#ff6600;font-weight:bold;text-align:center">
    				<span>&Egrave; arrivato l&rsquo;autunno: <span style="color:black;">risparmia su RC auto, gas e luce</span></span><span style="float:right;width:0px;overflow:hidden;max-height: 0px; display: none;"><span style="letter-spacing:-0.06em;xfont-size:94%">&Egrave; arrivato l&rsquo;autunno:  <br /><span style="color:black;">risparmia su RC auto, gas e luce</span></span></span>
    				</div>			</div>
    		</td>
    	</tr>
    </table>
    
    </td></tr></table></div>
    </td></tr></table>
    </td></tr></table></body></html>

    Thursday, September 28, 2017 11:04 AM
  • Hi puglina88,

    Thanks for more information.

    To check whether it is related with mailchimp or outlook, could you make a test by copy and paste html directly into Outlook Message body? Will it show correctly or not?

    As Unsupported HTML Attributes Compared with the HTML 4.01 Specification, it seems media is not supported.

    If you have any issue related with Mailchimp, I would suggest you go to Mailchimp Official site for help.

    Best Regards,

    Edward 


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, September 29, 2017 6:29 AM