iOS 10 Mail HTML not responding correctly

Asked 22/12, 2016 at 10:29 Answered 6/1, 2017 at 17:37

I am creating a newsletter and I discovered strange behavior.

I have a table with 2 inside and I want them to be a block and 100% width but following happens:

it also breaks some other parts of the mail. I tried already so much... every viewport, max-width, min-width, I have no idea what to do...

I verified, media queries are working

Are there some special hacks I need?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" style="box-sizing: border-box;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />    <meta name=”x-apple-disable-message-reformatting” />
    <meta property="og:title" content="*|MC:SUBJECT|*">
    <title>*|MC:SUBJECT|*</title>


    <style type="text/css">.inhalt li a {line-height:26px;}</style>


<style type="text/css">
body {
font-family: "Helvetica", "Arial";
}
img {
margin: 0; padding: 0; border: none;
}
body {
color: #000000; z-index: -3; font-family: "Helvetica", "Arial";
}
@media only screen and (max-width: 599px) {
  table[yahoo] {
    display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  .yahoo {
    display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  .desktop {
    display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
  }
  [desktop] {
    display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
  }
  .mobile {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  [mobile] {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  .mobileshow_inlineblock {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  [mobileshow_inlineblock] {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  .mobile {
    display: block !important;
  }
  [mobile] {
    display: block !important;
  }
  .mobileshow_inlineblock {
    display: inline-block !important;
  }
  [mobileshow_inlineblock] {
    display: inline-block !important;
  }
  .hidden {
    display: none !important;
  }
  .mblock {
    position: relative; display: table-row !important;
  }
  .mblock > tr {
    display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .mblock > tr > td {
    display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .underlined {
    text-decoration: underline !important;
  }
  .mcol {
    width: 100% !important; padding: 0 20px !important;
  }
  .halfcol {
    width: 120px !important;
  }
  .prehead td {
    height: 66px !important;
  }
  .logo {
    width: 115px !important; height: 26px !important;
  }
  .preheadtxt {
    font-size: 8px !important; line-height: 11px !important;
  }
  .header_image {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  .headertxt {
    font-size: 16px !important; line-height: 24px !important;
  }
  .inhalttitle {
    font-size: 28px !important; line-height: 36px !important;
  }
  .inhaltlinks a {
    font-size: 16px !important; line-height: 24px !important; text-decoration: none !important;
  }
  .teaser {
    width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .pretitle {
    font-size: 16px !important; line-height: 20px !important;
  }
  .teasertitle {
    font-size: 28px !important; line-height: 36px !important;
  }
  .posttitle {
    font-size: 16px !important; line-height: 20px !important;
  }
  .teasertxt {
    font-size: 16px !important; line-height: 24px !important;
  }
  .mcol_teaser_1_pic {
    width: 100% !important; text-align: right;
  }
  .mcol_teaser_2_pic {
    width: 100% !important; padding-bottom: 20px !important;
  }
  .teaserpic {
    height: auto !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .smallteaserlink {
    font-size: 22px !important;
  }
  .smallteaserpic {
    max-width: 100% !important; width: 100% !important; height: auto !important;
  }
  .footer .mcol a {
    text-decoration: underline !important;
  }
  .footer_leftpart {
    font-size: 16px !important; line-height: 34px !important;
  }
  .footer_rightpart {
    text-align: left !important;
  }
  .footer_copyright {
    width: 280px !important; padding: 0 20px !important; text-align: left; position: absolute; top: 100%; left: 0;
  }
  .type1 {
    font-size: 16px !important; line-height: 34px !important;
  }
  .type2 {
    font-size: 16px !important; line-height: 24px !important;
  }
}
</style>
</head>
<body bgcolor="#D8D8D8" style="box-sizing: border-box; font-family: 'Helvetica', 'Arial'; color: #000000; z-index: -3; margin: 0; padding: 0;">
<table bgcolor="#FFFFFF" class="body" cellspacing="0" cellpadding="0" yahoo="1" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0 auto; padding: 0; border: none;">
    <tr style="box-sizing: border-box;">
        <td align="left" valign="top" cellspacing="0" cellpadding="0" mainwrap style="box-sizing: border-box; margin: 0; padding: 0;">



<!-- // Begin Template teasertype2 \\ -->

<table yahoo width="600" class="mblock teaser teaser_2 yahoo" bgcolor="#ffffff" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0; padding: 0; border: none;">
    <tr style="box-sizing: border-box;">
        <td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
            <div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                LEFT
            </div>
        </td> <td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
            <div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                RIGHT
            </div>
        </td>
    </tr>
</table>




<!-- // End Template teasertype2 \\ -->






<!--[if !mso]><!-->
<!--<![endif]-->

        </td>
    </tr>
</table>
</body>
</html>

The current problem:

iOS 10 not accepting "display: block;" on "td" tags

Lagena answered 22/12, 2016 at 10:29 Comment(7)

I hope this link will help you #10556810 – Denominationalism 2/1, 2017 at 11:24

@Denominationalism thanks for tipp, but setting different doctype is not an option for email templates, but its a good clue... I will continue to digg, this is a huge problem for me right now – Lagena 2/1, 2017 at 15:25

This code works on ios 10.2 mail client. is it specific to ios 10? – Binary 3/1, 2017 at 6:59

maybe it help campaignmonitor.com/css – Paoting 3/1, 2017 at 7:27

@RohitAgre I have 10.1.1 on my Phone, I will upgrade and test it with 10.2 – Lagena 3/1, 2017 at 10:57

@RohitAgre nope, the problem is thill there, td is not displayes as a block, so I have 2 columns instead of 1 – Lagena 3/1, 2017 at 11:51

Interesting read for anyone with issues with mobile mail issues: emailonacid.com/blog/article/email-development/… – Metathesis 7/1, 2017 at 19:33

I’m not able to tell exactly where your issue occurs, but can see a lot of duplication in the supplied code above. There could be a collision, specificity issue, or iOS Mail just getting confusing and throwing a vital CSS rule out.

Here is a simplified example of a 600px wide email with two even columns that stack. I did not include most of the CSS (not relevant to this issue) and much of the surrounding HTML. I also removed the orphaned  at the end.

CSS to go in the <head>:

<style>
    @media screen and (max-width: 600px) {
        .mblock {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            direction: ltr !important;
        }
    }
</style>

And HTML:

<!-- // Begin Template teasertype2 \\ -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
    <tr>
        <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
            <!--[if mso]>
            <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
            <tr>
            <td align="center" valign="top" width="600">
            <![endif]-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
                <tr>
                    <td align="center" valign="top" style="font-size:0;">
                        <!--[if mso]>
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
                        <tr>
                        <td align="left" valign="top" width="300">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                                        LEFT
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        <td align="left" valign="top" width="300">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                                        RIGHT
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
            </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
<!-- // End Template teasertype2 \\ -->

This technique uses the hybrid approach, which uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway (hence the <!--[if !mso]> stuff). Media queries can enhance the email further in clients that support it, such as iOS Mail.

Edit: Additional doctype and meta info:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
</head>

Glossy answered 6/1, 2017 at 17:37 Comment(7)

The reason we use computers is because they don't get confused when they see lot's of info or have to do tedious work. The collision is a very possible/probably scenario – Metathesis 6/1, 2017 at 19:27

@Metathesis email clients have been known to get confused and disregard code – Glossy 6/1, 2017 at 19:38

That's the most ridiculous conclusion you can draw from the article. It states "Any extra special character might trigger it to completely filter out styles" and "supports up to 8192 Kb of styles. (And this has been recently updated to 16384 Kb". Note that both quotes only refer to gmail, and say nothing about the client getting "confused". It's either due to the css file being too large, or typos, both of which are faults with the dev, not with the thing reading the code getting "confused". Note how the page you linked is only for gmail. My point still holds. – Metathesis 7/1, 2017 at 19:28

@TedGoas which doc type are you using? I want to test your solution. – Lagena 9/1, 2017 at 14:45

@Fribu I edited my answer to include this info + notes. – Glossy 9/1, 2017 at 14:57

@TedGoas somehow your solution works... :) just have to find a reason for this, but this is really great. – Lagena 9/1, 2017 at 14:58

@Fribu Great! This is the Hybrid Technique, if you're interesting in knowing more about how and why it works. – Glossy 9/1, 2017 at 15:17

Try using [class="classname"] for both table and table td.

table[class="mblock"],
table td[class="mblock"]  {
    width: 100% !important;
    display: block !important;
}

In actual fact this will work as well by just targeting td;

td[class="mblock"] {
    width: 100% !important;
    display: block !important;
}

Alternate Method to Media Query

I am assuming some kind of transformation (such as; MS Word ML) on your original styles in the header.

An alternative method that is fairly bullet proof for almost (if not) all is called the Fab Four Technique it does not rely on media queries which means you get you're adaptive layout in clients that do not support it; such as; Outlook and Gmail.

JS Fiddle Here

Article on Medium

Example on Litmus

Garland answered 4/1, 2017 at 6:4 Comment(5)

The problem is not the selector, the problem is with the "block" property on td's – Lagena 4/1, 2017 at 11:58

Can you let us know a little more about how you are sending these emails? The block does in fact work for td on ios 10.2 but I am wary of how your HTML gets transformed in the send process. – Garland 4/1, 2017 at 12:19

I send it as a plain html, no transformation. I have also tried a very simple setup with block and 2 tds, nothing else, and it doesn't worked for me. If you have a working example, please send me a preview ([email protected]) – Lagena 6/1, 2017 at 9:7

The reason I ask - I see some Microsoft markup in your plain HTML - so I am assuming that you're using some sort of MS tech to send and in doing so the HTML gets transformed as a result using MS Word Processing markup. I say this 'cause I have experienced it first hand. I will, nevertheless, setup the same markup using something like Campaign Monitor or similar. What they do is they transform plain HTML the right way. – Garland 6/1, 2017 at 9:24

No, this microsoft markup is made to display background images on outlook clients. – Lagena 6/1, 2017 at 12:41

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags