1

I have a responsive email that i am struggling to make Outlook look correct.

I have the below html which should put the 2 tables next to each other but it is stacking them ontop of each other.

I am using...

 <!--[if (gte mso 9)|(IE)]>

to target outlook but it seems to be ignoring this. It is also ignoring my max width call in the style tag.

Any idea why this is happening?

<tr> <td class="innerpadding "> <!--[if (gte mso 9)|(IE)]> <table width="360" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col400" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td> <img src="Dog.png" alt="Dog Image" width="95%" border="0" style="width:95%;max-width:360px;"/> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> <!--[if (gte mso 9)|(IE)]> <table width="240" align="right" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col240" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td> <span style="font-family:Arial, Helvetica, sans-serif;font-size:38px;color:#f4911c;">Text Here</span> <span style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#555557;display: block;font-style: italic;padding-top: 10px;line-height: 22px;">Text Here</span> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr>
Improve this question

2 Answers 2

Reset to default
1

Try setting a width="" value on your container table. Also adding align="left" there might help. In the past I've found that Outlook has needed that even though it is the children elements that are aligning/floating.

If that doesn't work, just for testing, try adding a top padding and different bgcolor to your conditionally hidden tables to see if they are triggering or not. This will help diagnose if it is the conditional breaking or something else...

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thank you for your post it helped me to debug it in a way i wasnt previous and now i got it working 100%! Cheers!
Another tip is to add some extra style="float: right" to your table with align="right". These 2 back each other up in different email clients. So use both together for best results. And some say its even better to write "Float" with capital instead of lowercase "float" but I haven't tested that. <table align="right" style="Float: right;"> <table align="left" style="Float: left;">
0

Both your tables are set to a width of 100%, try setting the style='width:100%' to 50% for each table and see if this works.

Also, what code is on the classes (col400 and col240) for both tables? This is likely to have an impact.

Improve this answer

1 Comment

The width 100% is supposed to be for when the media query kick in to make the table 100% width on the mobile device. For col400 and col240 i have the that like this @media only screen and (min-device-width: 601px) { .col400 {width: 400px!important;} .col240 {width: 240px!important;} }

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.