New to coding and i can not for the life of me see why this email is not working in outlook 2010, it's just the top part as well, any advise on how to fix this or
<table>
<tr>
<td valign="top" width="15px"> </td>
<td width="50">
<img alt="" height="99" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_03.png" width="123" /></td>
<td align="right" valign="top" width="585"></td>
</tr>
</table>
<table bgcolor="#5BBBB7" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td height="340px" width="600px">
<table align="center" cellpadding="0" cellspacing="0" style="width: 574px">
<tr>
<td colspan="3" style="height: 32px; width: 574px">
<img alt="" height="32" height="32px" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_07.png" width="574" /></td>
</tr>
<tr>
<td rowspan="2" style="height: 279px; width: 13px">
<img alt="" height="279" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_09.png" width="13" /></td>
<td align="left" bgcolor="#ffffff" style="padding-top: 10px; padding-left: 10px; padding-right: 10px" style="display: block; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 12px; color: #000000; line-height: 14px; height: 212px;" valign="top" width="218px">
</td>
<td rowspan="2" style="height: 279px; width: 343px">
<img alt="" height="279" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_11.png" width="343" /></td>
</tr>
<tr>
<td style="height: 67px; width: 218px">
<img alt="" height="67" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_12.png" style="display: block" width="218" /></td>
</tr>
</table>
I don't think Outlook accepts height / width CSS, so stick to the HTML attributes instead.
Also- take the px off of your html attributes, that should solve a chunk of it.
Set display:block on all your images too, and if I remember correctly Outlook isn't great at rowspan - try and separate your tables rather than trying to have rows with different amounts of columns.
Related
My email signature works perfectly fine on iOS Mail in the default Light Mode.
However if you switch to Dark Mode and send an email with it, the background of the full message becomes white. The content is also touching the edge on the left hand side, which doesn't look good.
Ideally I would like the background in Dark Mode to be transparent, dark text to switch to white etc.
I have tried various things such as setting all the fonts/ backgrounds to #000000, however that didn't change anything.
Please see my code below, together with a screenshot taken in Dark Mode:
<table width="320" cellspacing="0" cellpadding="0" border="0" style="width: 320px; max-width: 320px; background-color: transparent;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; line-height: 19px; color: #000000;">
Joe Bloggs
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; line-height: 19px; font-size: 14px; color: #3d3c3f;">
Project Manager
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 8px;"> </td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="line-height: 18px; border-spacing: 0;">
<tbody>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Mobile" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/phone.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="tel:+4407777777777" style="font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
+44 (0)7777 777777
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Email" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/email.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="mailto:test#gmail.com" title="Email me" style="font-family: Arial, sans-serif; color: #0b9cab; color: #0b9cab !important; text-decoration: none !important; text-decoration: none;">
test#gmail.com
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Website" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/www.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a
href="#"
title="Visit our website"
target="_blank"
style="font-family: Arial, sans-serif; color: #0b9cab; text-decoration: none !important; text-decoration: none;"
>
website-address.co.uk
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Address" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/address.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; padding-left: 2px; text-decoration: none !important; text-decoration: none;">
19 London Road, London,
</span>
<br />
</td>
</tr>
<tr>
<td style="font-size: 13px;" align="left" valign="middle"></td>
<td style="font-size: 13px; padding-left: 3px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
LE43 0RR, United Kingdom
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 2px; background-color: #0b9cab;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td>
<table width="320" cellspacing="0" cellpadding="0" border="0" width="320px" style="background-color: #000000; border-spacing: 0;">
<tr>
<td valign="middle" width="90" style="width: 90px; font-family: Arial, sans-serif; font-size: 13px; color: #ffffff; padding-left: 10px;">
Follow us:
</td>
<td height="32" valign="middle" style="height: 32px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">
<tr>
<td valign="middle">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Facebook icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/fb-2ef13da0.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Instagram icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/insta-3478a59b.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Pinterest icon"
title="Pinterest"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/pin.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Website icon"
title="Visit our website"
border="0"
width="14"
height="14"
style="display: block;border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/web.png"
/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 7px; background-color: #0b9cab;"> </td>
</tr>
I am creating the header shown below for an email template. As you can see, the text is slightly offset from the center of the email. This happens because I have two table cells: one for the logo and another for the text. I can center the text within its cell, but that cell isn't 100% of the width due to the the logo cell taking up 74 pixels. I can shift the header to the left using margin-left in most email clients, but Outlook and Gmail both don't support margins, and I need to support both clients. How can I go about getting the text centered in Outlook and Gmail?
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Took me a little while to understand your question but i think i got it. You want to center the text within the outer table regardless of the logo being there, right? If thats a yes, then its just a matter of adding another 74px block on the right of the text.
Have a look at the code to see what i did:
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
<td width="74px" align="center">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Cheers
I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row.
Here is the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style type="text/css">
/***START, CSS targeting client bugs***/
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
}
.ExternalClass {
width: 100%;
/* Forces Hotmail to display emails at full width */
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
/* Forces Hotmail to display normal line spacing */
}
body {
margin: 0;
padding: 0;
/* Resets all body margins and padding to 0 for good measure */
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
/*This resolves the Outlook 07, 10, and Gmail td padding issue */
}
#-ms-viewport {
width: device-width;
}
/***END, CSS targeting client bugs***/
/***START, Reset styles***/
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
line-height: 100%;
}
/***END, Reset styles***/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: underline;
color: #0063ba;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: underline;
color: #0063ba !important;
pointer-events: auto;
cursor: default;
}
body {
overflow-x: hidden !important;
text-align: center !important;
background-color: #ffffff !important;
}
body[yahoo] .container {
width: 320px !important;
display: block !important;
}
body[yahoo] .drop {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 2px 0 !important;
}
body[yahoo] .hide_this {
display: none !important;
}
body[yahoo] .respond_to_width {
width: 100% !important;
display: block !important;
}
body[yahoo] .mobile_image {
width: 100% !important;
height: auto !important;
}
body[yahoo] .pushto100 {
width: 100% !important;
}
body[yahoo] .centerthis {
text-align: center !important;
display: inline-block !important;
}
}
</style>
</head>
<custom name="opencounter" type="tracking">
<body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
<!--CENTER EMAIL_start-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;">
Click to view this message in a browser
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width">
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_header" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone1" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone2" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone3" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone4" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone5" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone6" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_footer" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;">
%%=ContentAreaByName("Divider_Green")=%%
</td>
</tr>
<!--SOCIAL BUTTONS/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
FaceBook
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://plus.google.com/" alias="Google+" target="_blank">
Google+
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://instagram.com/" alias="Instagram" target="_blank">
InstaGram
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="http://www.pinterest.com/" alias="Pinterest" target="_blank">
Pintrest
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://twitter.com/" alias="Twitter" target="_blank">
Twitter
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--EMAIL, PHONE NUMBER/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;">
customerservice#arbitraryLink.com
<span style="font-size:14px;font-family:arial,sans-serif;color:#000001">
| 1.888.777.6666
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="drop" align="center" valign="middle">
<!--CTA BUTTON/-->
<br>
<br>
<table cellpadding="0" cellspacing="0" border="0" class="pushto100">
<tr>
<td align="left" valign="middle" style="padding:0 10px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;">
<span style="text-decoration: none;color:#88ab00;">
sign up for emails</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--<br><br>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;">
<span style="color:#333333; width:640px;">
*Terms and conditions apply
<br><br>
This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%</span>
<br>
<span style="color:#333333;">
This email was sent to: <strong>%%emailaddr%%</strong></span><span style="color:#333333;">. We respect your right to privacy -</span> privacy policy
<br>
<br>
One-Click Unsubscribe
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--CENTER EMAIL_end-->
%%[ var #additionalattribute1, #additionalattribute2, #additionalattribute3, #additionalattribute4 Set #additionalattribute1 = __AdditionalEmailAttribute1 Set #additionalattribute2 = __AdditionalEmailAttribute2 Set #additionalattribute3 = __AdditionalEmailAttribute3 Set #additionalattribute4 = __AdditionalEmailAttribute4 ]%%
<img src="http://track.securedopen-q.com/?sv_cid=0215_01811&sv_emopen=true&sv_svem=%%emailaddr%%&cm_source=tracking_pixel_stuff" height="1" width="1" />
</body>
</html>
You can see the white lines in my jFiddle when resizing the browser in chrome. http://jsfiddle.net/stormbloom/4s0sqkbb/
Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.
I discovered if I add an in-line style: outline 1px solid #f00; to the table, it fixes the white line issue. The problem is that many email clients do not support outline, but they add a space where outline is being used. So it causes the table you target to have a noticeable white space in that email client.
To fix this issue and only target iphone and devices using webkit is to create a class called .iphone and add it to a media query which targets iPhone 5, 6 and 6 plus.
#media only screen and (max-width: 414px) {
.iphone {
outline: 1px solid #f00;
}
Add the class "iphone" to the table with the white line issue. This fixes the white line issue and only shows on devices that can work with that media query. This tested with Litmus and with observing on the actual devices.
I have an html email template I am working on. For some reason the boxes do not line up. I assume is a box sizing issue or padding is being added... Here is the code:
<table width="700px" cellspacing="0" cellpadding="0" bgcolor="#e85728" align="center" style="width: 700px;" class="dashedBorder">
<tbody>
<tr>
<td width="350px" valign="middle" bgcolor="#e85728" height="298" align="center" style="font-family: Arial; font-size: 13px; white-space: normal; padding-left: 40px; padding-right: 40px; width: 350px;"><br />
<font size="4" color="#ffffff">
<font size="4" color="#ffffff">Use your CAP-VIA discount coupon & be entered into a draw to win a $5,000 trip with VIA Rail.</font>
</font>
<table width="167" cellspacing="0" cellpadding="0" bgcolor="#ffffff" height="33" align="center" style="box-shadow: -1px -1px 5px #888888; border-radius: 6px;" class="dashedBorder">
<tbody>
<tr>
<td align="center" style="font-family: Arial; font-size: 13px; padding: 5px 10px;" 2"=""><b><font color="00698f"><a style="text-decoration: none;" href="http://www.icc-icc.ca" title="ENTER TO WIN NOW" alias="ENTER TO WIN NOW" conversion="false"><font color="00698f">ENTER TO WIN NOW</font></a></font></b></td>
</tr>
</tbody>
</table>
<font size="4" color="#ffffff">
<p>
<font size="2" color="#ffffff"><u><a style="text-decoration: none;" false"="" alias="Find out how to enter " title="Find out how to enter " href="http://www.icc.ca"><font color="#ffffff">Find out how to enter
</font></a></u></font>
</p>
</font></td>
<td width="350px" valign="top" bgcolor="#FFFFFF" height="" align="left" style="font-family: Arial; font-size: 13px; width: 350px; white-space: normal;">
<table width="50" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="100" class="dashedBorder">
<tbody>
<tr>
<td width="" valign="middle" bgcolor="#FFFFFF" height="" align="left" style="font-family: Arial; font-size: 13px; white-space: normal;"><img width="350" vspace="0" border="0" hspace="0" height="300" alt="Image_350x300px" title="Image_350x300px" src="http://image.S7.exacttarget.com/lib/fe9c13727565047e73/m/1/Image_350x300px.jpg" style="width: 350px; height: 300px;" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Your table to the right is set to a width of 50. I assume you want it at 350 like the table on the left?
<table width="50" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="100" class="dashedBorder">
Needs to be:
<table width="350" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="100" class="dashedBorder">
Unfortunately the program I use to send out email does not allow for #media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.
Here is the base of what I have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" style="width: 100%;"> --banner image here-- </td>
</tr>
</table>
<table align="left" width="320">
<tr>
<td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
</tr>
</table>
<table align="left" width="180">
<tr>
<td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>