Almost at breaking point with this. Coding this in dreamweaver and when I view it in the live mode comes up fine but when in live mode, but when I send it through the email clients such as outlook and gmail, it has one images out of line and i can't see why. New to this so sorry if code is a bit messy.
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">
</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br />View it in your browser.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td style="padding-top:25px">
</td>
</tr>
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/logo1.png" style="max-width:600px; font-family:Tahoma; font-size:32px; color:#000000" alt="Spaceform London" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext/>
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
<tr>
<td style="padding-top:10px">
</td>
</tr>
<tr>
<td align="center" style="font-family:Tahoma; font-size:14px; padding-top:15px; padding-bottom:15px">
Home | Shop | Bestselling Gifts | Personalised Gifts | About Spaceform | Contact us</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="600" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_02.jpg" border="0" style="display:block;" width="24" height="1474" /></td>
<td colspan="2" width="552" height="43"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_03.jpg" border="0" style="display:block;" width="552" height="43" /></td>
<td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_04.jpg" border="0" style="display:block;" width="24" height="1474" /></td>
</tr>
<tr>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="122" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:122px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="273" height="350" rowspan="3"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_06.jpg" border="0" style="display:block;" width="273" height="350" /></td>
</tr>
<tr>
<td width="279" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_07.jpg" border="0" style="display:block;" width="279" height="45" /></td>
</tr>
<tr>
<td width="279" height="183"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_08.jpg" border="0" style="display:block;" width="279" height="183" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_09.jpg" border="0" style="display:block;" width="552" height="41" /></td>
</tr>
<tr>
<td rowspan="3" width="279" height="233"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_10.jpg" border="0" style="display:block;" width="279" height="233" /></td>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="93" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px;height:93px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td width="273" height="37"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_12.jpg" border="0" style="display:block;" width="273" height="37" /></td>
</tr>
<tr>
<td width="273" height="103"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_13.jpg" border="0" style="display:block;" width="273" height="103" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="47"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_14.jpg" border="0" style="display:block;" width="552" height="47" /></td>
</tr>
<tr>
<td rowspan="3" width="279" height="317"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_15.jpg" border="0" style="display:block;" width="279" height="317" /></td>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="95" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px; height:95px">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td width="273" height="35"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_17.jpg" border="0" style="display:block;" width="273" height="35" /></td>
</tr>
<tr>
<td width="273" height="187"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_18.jpg" border="0" style="display:block;" width="273" height="187" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_19.jpg" border="0" style="display:block;" width="552" height="41" /></td>
</tr>
<tr>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="96" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:96px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet, </div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td rowspan="3" width="273" height="293"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_21.jpg" border="0" style="display:block;" width="273" height="293" /></td>
</tr>
<tr>
<td width="279" height="38"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_22.jpg" border="0" style="display:block;" width="279" height="38" /></td>
</tr>
<tr>
<td width="279" height="159"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_23.jpg" border="0" style="display:block;" width="279" height="159" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="40"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_24.jpg" border="0" style="display:block;" width="552" height="40" /></td>
</tr>
<tr>
<td colspan="2" width="279" height="69"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_25.jpg" border="0" style="display:block;" width="552" height="85">
</td>
</tr>
<td colspan="4" width="600" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_26.jpg" border="0" style="display:block;" width="600" height="45" /></td>
</tr>
<tr>
<td colspan="4" width="600" height="324"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_27.jpg" border="0" style="display:block;" width="600" height="324" /></td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" valign="middle" id="social" style="padding-bottom:20px">
<div mc:edit="std_social" style="font-size: 14px; font-style:normal">
We love being social,
why not come and say hi... <img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/facebook2.png" alt="on Facebook" style="max-width:600px; id="Img9" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/twitter2.png" alt="on Twitter" style="max-width:600px; id="Img10" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/pinterest2.png" alt="or on Pinterest" style="max-width:600px; id="Img11" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
</div>
</td>
</tr>
<tr>
<td valign="top" width="350">
<div mc:edit="std_footer">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved. >
<br />
*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
<br />
<strong>Our mailing address is:</strong>
<br />
*|HTML:LIST_ADDRESS_HTML|**|END:IF|*
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
unsubscribe from this list | update subscription preferences<br />
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
You cant have empty <td>, outlook will ignore all styling you have made.
So insert a small transparent image inside them like <img src="Img/trans.png" height="1" width="1" style="display:block">
You dont have the <head> in the code so i Can see it, but remember you cant style with external css. Gmail removes everything in your header.. So everything needs to be inline styling
EDIT:
After looking a bit more on your code i can see you have lot of rowspan="" some mail client dosnt like that. If neede try only to use colspan, and not rowspan. All of the vertical pictures side by side can get ugly.
It looks like when you sliced the image you somehow lost a 16px high by 24px wide chunk off the bottom of each sidebar image.
The sidebar images, cell_02.jpg and cell_04.jpg, are 1474px tall while the center column images add to 1490px tall. The sidebar table cells get stretched vertically to match the height of the center column, leaving 16px of empty space, and center the images vertically, leaving 8px of empty space top and bottom.
I suggest you find the missing bits and make each sidebar image 16px taller. Alternatively, you could take a 16px slice off the bottom of cell_25.jpg, paste it to the top of cell_26.jpg, and fill in the missing corners.
Related
I'm creating a HTML email, it works fine on all the mail clients I tested except on Outlook 2016 software (works fine on Outlook website)
I tried to use td side-by-side instead of table but it's breaking my responsiveness. Tables are supposed to side-by-side splitting the email in 2 parts. In Outlook software, there is a big gap above the second table making if shifted and not aligned with the first one.
Here is my code:
<tr>
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I'm expecting to have my 2 tables properly aligned side-by-side like I have them on all other email clients.
welcome to SO!
To do this - you will need to place the following snippet between your 2 left aligned tables:
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
Due to the nature of MSO - it doesn't support table floating, so this effectively lies to MSO and turns them into 2 columns.
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Just one of the many quirks with mso :)
Here's what it's supposed to look like:
Here's what it looks like in Outlook:
For some reason the "call us" table is being pushed to the next line below instead of staying in-line. I tried placing "white-space:nowrap" on tr's/td's and that didn't seem to solve my problem.
Below is the markup:
<tr>
<td>
<table id="border-1" align="left" style="border-top: 4px solid #444; border-left: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-top: 4px solid #444; border-right: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!---- top footer end --->
</table>
You could try using out Outlook conditional code since this is solely an Outlook windows issue. And then target it to whatever your dimensions are.
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640"> <tr><td align="center" valign="top" width="318">
<![endif]-->
Side 1
<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
You could try what Richard has suggested by adding a ghost column
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
Or you can try doing something similar to below:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#444444" style="padding:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff">
<table id="border-1" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have added table with 4px padding around the two blocks you have and added CSS to the table which allows you to place tables side by side in outlook:
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
If this doesnt work you can decrease the width of the two columns to 49% and it should work properly.
Note: decrease the width if you are using my code above.
Hope the above helps.
My media queries are not being recognized by Gmail for mobile.
Does anybody how can this be fixed? I'd like my cells to stack, it all works fine on Mail iOS, Outlook iOS, but not Gmail ...
Thanks for your advice!
Gmail doesn't support media queries (or the <style> tag), so in order to have table cells stack on narrow widths you have to code a hybrid email.
These patterns by Fabio Carniero demonstrate this principle in action. I would strongly recommend looking at these scaffolds, as they achieve column stacking in mobile Gmail as well as other email clients that don't support media queries.
Here is an example of a 2-column layout that stacks without using media queries (adapted from Fabio's files):
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
LEFT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
RIGHT
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
trying to get the shipping details and order details tables to line up next to each other in the same row. i have them in a wrapper table, and set the widths to 50%, but they still line up in a block format. making one of the widths less than 50% didn't change anything.
----this is an email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Climatic Corporation</title>
<style type="text/css">
/*RESET STYLES*/
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Tahoma, Verdana, Segoe, sans-serif;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
/*CLIENT SPECIFIC STYLES*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
table,td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
#outlook a{padding:0;}
img{-ms-interpolation-mode: bicubic;}
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
/*Custom Styles*/
#mainTable{
border:4px solid black;
}
/*Mobile Styles*/
#media only screen and (max-width:479px) {
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="620" id="containerTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
<tr>
<td align="left" valign="top">
<img src="CClogo.png" alt="Climatic Corporation Logo">
</td>
<td align="right" valign="top">
800-845-4555
<br>
csr#climaticcorp.com
<br>
climatichomeproducts.com
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="mainTable">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="messageTable">
<tr>
<td align="left" valign="top" width="100%">
<h1>THANK YOU!</h1>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Hello ##Shopper - thanks for shopping with us.</p>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Order ##OrderNumber has been placed. We appreciate your business.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="detailsWrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="shippingTable">
<tr>
<td align="left" valign="top">
<h3>Shipping Details</h3>
<p>##ShippingAddress</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="orderTable">
<tr>
<td align="left" valign="top">
<h3>Order Details</h3>
<p>##PONumber</p>
<p>##NumItems units</p>
<p>##OrderValue dollars</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
here is the fiddle https://jsfiddle.net/baLn4ucj/
To make cells within a table align next to each other, they need to be in different "td" elements. If they are in the same "td" they will be part of a normal flow.
I demonstrated this for you here, by modifying your example.
<tr>
<td> left </td>
<td> right </td>
</tr>
https://jsfiddle.net/DonatoBorrello/baLn4ucj/1/
This is the code that is broken in outlook 2013 and 2010 works fine in 2003 and everything else. I am wondering what might be causing the issue. The page is just white and I cant find any of the email template in litmus. If anyone could help that would be great.
<!-- Wrapper 2 (Header) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff">
<!-- 1px Height Border -->
<table class="fullWidth" width="740" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" height="1" bgcolor="#dedede"></td>
</tr>
</table>
<!-- Mobile Wrapper -->
<table width="100%" height="300" class="fullWidth" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" bgcolor="f6f6f6" background="beachBg.png" style="background-size: 100%; background-position-y: -100px;">
<a href="http://www.something.com">
<div>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:740px;height:300px;">
<v:fill type="tile" src="beachBg.png" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile" height="300">
<tr align="right" class="socialNav">
<td width="100%">
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="rss" src="rss.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="vimeo" src="vimeo.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="50" valign="top">
<img alt="instagram" src="instagram.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="tumblr" src="tumblr.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="youtube" src="youtube.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="facebook" src="facebook.png"/>
</td>
</tr>
</tbody></table>
<table width="35" border="0" cellpadding="0" cellspacing="0" align="right" class="clearing">
<tbody><tr>
<td width="375" valign="top">
<img alt="linkedin" src="linkedin.png"/>
</td>
</tr>
</tbody></table>
</tr>
<tr class="beachLogo">
<td style="width:740;" ><img style="margin-left:80px;" src="beachLogo.png"></td>
<td width="400"></td>
</tr>
</table>
<div>
</div>
</div>
</td>
</tr>
</table><!-- End Header -->
</td>
</tr>
</table><!-- End Mobile Wrapper -->
<!-- Space -->
<table bgcolor="ffffff" width="740" border="0" cellpadding="0" cellspacing="0" align="center" class="mobileCenter">
<tr>
<td width="740" height="0">
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper 2 -->
A couple of syntax issues I'm seeing.
<a href="http://www.something.com"> is missing a closing tag.
You probably shouldn't be wrapping everything in just 1 <a> tag like that.
The </tr> before <tr class="beachLogo"> is missing a </td>
Fix those issues and see if you get better results in Outlook.