TechQA.

iOS 10 Mail HTML not responding correctly

4.1k views Asked by At

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:

enter image description here

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

html css html-email newsletter
Original Q&A
2

There are 2 answers

7
Ted Goas On BEST ANSWER

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 <!--[if !mso]><!--><!--<![endif]--> 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>
5
Jabuka On

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

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-EMAIL

Related Questions in NEWSLETTER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions