Menu
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
284
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
