Geek Answers Handbook

IOS 10 Mail does not respond correctly

I am creating a newsletter and I have discovered strange behavior.

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

enter image description here

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

I checked media queries work

Are there any 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>

Current issue:

iOS 10 does not accept "display: block;"; on tags "td"

+8
html css html-email newsletter
source share
2 answers

I can’t say exactly where exactly your problem is happening, but can see a lot of duplication in the above code. There may be a collision, specifics, or iOS Mail issue, just messing up and throwing the CSS life rule away.

Here is a simplified example of an email with a width of 600 pixels with two even columns that drain. I did not include most of the CSS (not related to this issue) and most of the surrounding HTML. I also removed the orphaned <!--[if !mso]><!--><!--<![endif]--> at the end.

CSS to go to <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 method uses a hybrid approach that uses maximum width and minimum width to impose hard baselines (allowing some movement) and imposes a fixed wide width for Outlook, which is bound to the desktop anyway (hence the material <!--[if !mso]> ). Inquiries from the media can improve email further in supportive clients such as iOS Mail.

Edit: Additional doctype and meta information:

 <!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>
+2
source share

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

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

Actually this will work just by aiming at td ;

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

Alternative method for requesting media

I am assuming some kind of conversion (e.g. MS Word ML) in your original styles in the header.

An alternative method that is bulletproof enough for almost (if not) is called "strong"> Fab Four Technique, it does not rely on media queries, which means that you get an adaptive layout in clients that do not support it; such as the; Outlook and Gmail.

JS Fiddle Here

Article on Medium

Litmus example

0
source share

More articles:


All Articles