What cause displacement of images on outlook

Hi,

Happy new year.

Need a bit of help.

I am absolutely going mental here. I tried everything i know and the images still look displaced. I have changed my table from 600px to 599px, defined the original box size of the content into the <colspan>... the iamges (the social media icons and the rest at the top of the email will look throw to the sides as if something is forcing ti to fit 800px. Can someone help me to solve this problem?

http://i1227.photobucket.com/albums/ee439/idpaustralia/forcampmonitorforum.jpg

roshodgekiss roshodgekiss, 4 years ago

Hi cokeaddik, is it possible for you to post the code here for us to look at? Either way, my first suggestions would be to add img { display: block; } and see if that helps. Also check if there's any alignment styles/attributes like text-align: justify; that may be causing the layout to go mad.

Hope this helps!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
cokeaddik, 4 years ago
roshodgekiss :

Hi cokeaddik, is it possible for you to post the code here for us to look at? Either way, my first suggestions would be to add img { display: block; } and see if that helps. Also check if there's any alignment styles/attributes like text-align: justify; that may be causing the layout to go mad.

Hope this helps!

I was tiny bit concern about privacy of it... but without the code.... I cant get full help..what gives... here it is. I have use display block, I use align="center".

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:rn="http://schemas.rightnow.com/crm/document">
<head>
<title>Seminar pathway</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">
<!-- ImageReady Slices (Seminar pathway.psd) -->
<table id="Table_01" border="0" cellspacing="0" cellpadding="0" width="599" align="center" height="741">
<tbody>
<tr>
<td height="12" width="599" colspan="7">
<div align="center"><span style="FONT-SIZE: 10px" class="style2">View this email on website</span></div>
</td>
</tr>
<tr>
<td colspan="7"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_02.gif" width="599" height="136" /></td>
</tr>
<tr>
<td colspan="7"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_03.gif" width="599" height="18" /></td>
</tr>
<tr>
<td><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_04.gif" width="17" height="367" /></td>
<td height="367" width="561" colspan="5">
<p style="FONT-SIZE: 12px" class="style3" align="center">Please do not reply this email and send all enquiries to ie@idp.com.</p>
<p style="FONT-FAMILY: Tahoma, Verdana; FONT-SIZE: 12px" class="style5">Dear ,<br />
<br />
Are you looking for a chance to get blah blah</p>
<p style="FONT-FAMILY: Tahoma, Verdana; FONT-SIZE: 12px" class="style5">Come and join blah blah Thu, 19 and Fri, 20 January.</p>
<p style="FONT-FAMILY: Tahoma, Verdana; FONT-SIZE: 12px" class="style5">blah blah blah blah.</p>
<p style="FONT-FAMILY: Tahoma, Verdana; FONT-SIZE: 12px" class="style5" align="center"><strong>Iblah blahates</strong><br />
<br />
<span style="COLOR: #ff6600; FONT-WEIGHT: bold" class="style6">Date: Thursday, 19 and Friday, 20 January 2012<br />
Student Visa updates : 1:00 pm – 2:00 pm<br />
Pathway courses : 2:00 pm – 3:00 pm<br />
NAVITAS SA (SAIBT/CELUSA CRICOS: 02193C, EYNESBURY CRICOS 00561M)<br />
Venue: IDP Adelaide @ 96A Currie Street, Adelaide SA 5000</span></p>
<p><span style="FONT-FAMILY: Tahoma, Verdana; FONT-SIZE: 12px" class="style5"><span style="COLOR: #0033ff" class="style7">Benefits:<br />
• Personal assessment by representatives from institutions<br />
• Guidance on student visa (by Registered Migration Agent, MARN 0742134)<br />
• Apply on the day and receive IDP Post-it, shopping bag and IDP Backpack<br />
<br />
Please bring your passport, academic transcripts, English results and other documents for your application on the day.</span><br />
<br />
Please book by sending your contact details to info.adelaide@idp.com<br />
We look forward to meeting you soon.<br />
IDP Education Pty Ltd<br />
Adelaide Student Services<br />
96A Currie Street, Adelaide<br />
SA 5000 Australia<br />
Tel: 61 8 8205 1100<br />
Fax: 61 8 8205 1111</span><br /></p>
<br /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_06.gif" width="21" height="367" /></td>
</tr>
<tr>
<td style="FONT-SIZE: 10px" class="style2" colspan="2"><img style="DISPLAY: block" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_07.gif" width="300" height="93" /></td>
<td style="FONT-SIZE: 10px" class="style2"><a href="http://www.facebook.com/idpaustralia" target="_new"><img style="DISPLAY: block" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_08.gif" width="101" height="93" /></a></td>
<td style="FONT-SIZE: 10px" class="style2"><a href="http://www.twitter.com/idpaustralia" target="_new"><img style="DISPLAY: block" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_09.gif" width="94" height="93" /></a></td>
<td style="FONT-SIZE: 10px" class="style2" colspan="3"><a href="http://www.foursquare.com/idpaustralia" target="_new"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_10.gif" width="104" border="0" height="93" /></a></td>
</tr>
<tr>
<td style="FONT-SIZE: 10px" class="style2" colspan="5"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_11.gif" width="529" height="114" /></td>
<td style="FONT-SIZE: 10px" class="style2" colspan="2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_12.gif" width="70" height="114" /></td>
</tr>
<tr>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="17" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="283" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="101" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="94" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="34" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="49" height="1" /></td>
<td style="FONT-SIZE: 10px" class="style2"><img style="DISPLAY: block" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/spacer.gif" width="21" height="1" /></td>
</tr>
</tbody>
</table>
<span style="FONT-SIZE: 10px" class="style2"><!-- End ImageReady Slices --></span>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi cokeaddik, the issue here is when you export the design from ImageReady, it added colspan="x" to a whole bunch of your <tr> rows. Unfortunately, the columns in the layout don't add up to what was defined in colspan and as a result, the design blew out in width beyond the desired 599px.

Our advice in the future would be to break complicated layouts into nested tables and remove colspan="" wherever possible. You can also remove the all-white spacer images, as they simply result in higher loading times, with little benefit.

I've cleaned up the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seminar pathway</title>
</head>
<body bgcolor="#FFFFFF" style="margin: 0; padding: 0;">
<table  border="0" cellspacing="0" cellpadding="0" width="599" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="12" align="center"  style="font-size: 10px;"><webversion>View this email on website</webversion> | <unsubscribe>Unsubscribe</unsubscribe></td>
  </tr>
  <tr>
    <td><img style="display: block;" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_02.gif" width="599" height="136" /></td>
  </tr>
  <tr>
    <td><img style="display: block;" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_03.gif" width="599" height="18" /></td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img style="display: block;" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_04.gif" width="17" height="1" /></td>
          <td height="367" width="561"><p style="font-size: 12px" class="style3" align="center">Please do not reply this email and send all enquiries to ie@idp.com.</p>
            <p style="FONT-FAMILY: Tahoma, Verdana; font-size: 12px" class="style5">Dear ,<br />
              <br />
              Are you looking for a chance to get blah blah</p>
            <p style="FONT-FAMILY: Tahoma, Verdana; font-size: 12px" class="style5">Come and join blah blah Thu, 19 and Fri, 20 January.</p>
            <p style="FONT-FAMILY: Tahoma, Verdana; font-size: 12px" class="style5">blah blah blah blah.</p>
            <p style="FONT-FAMILY: Tahoma, Verdana; font-size: 12px" class="style5" align="center"><strong>Iblah blahates</strong><br />
              <br />
              <span style="COLOR: #ff6600; FONT-WEIGHT: bold" class="style6">Date: Thursday, 19 and Friday, 20 January 2012<br />
              Student Visa updates : 1:00 pm – 2:00 pm<br />
              Pathway courses : 2:00 pm – 3:00 pm<br />
              NAVITAS SA (SAIBT/CELUSA CRICOS: 02193C, EYNESBURY CRICOS 00561M)<br />
              Venue: IDP Adelaide @ 96A Currie Street, Adelaide SA 5000</span></p>
            <p><span style="FONT-FAMILY: Tahoma, Verdana; font-size: 12px" class="style5"><span style="COLOR: #0033ff" class="style7">Benefits:<br />
              • Personal assessment by representatives from institutions<br />
              • Guidance on student visa (by Registered Migration Agent, MARN 0742134)<br />
              • Apply on the day and receive IDP Post-it, shopping bag and IDP Backpack<br />
              <br />
              Please bring your passport, academic transcripts, English results and other documents for your application on the day.</span><br />
              <br />
              Please book by sending your contact details to info.adelaide@idp.com<br />
              We look forward to meeting you soon.<br />
              IDP Education Pty Ltd<br />
              Adelaide Student Services<br />
              96A Currie Street, Adelaide<br />
              SA 5000 Australia<br />
              Tel: 61 8 8205 1100<br />
              Fax: 61 8 8205 1111</span><br />
            </p>
            <br /></td>
          <td><img style="display: block;" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_06.gif" width="21" height="1" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table cellpadding="0" cellspacing="0">
        <tr>
          <td><img style="display: block;" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_07.gif" width="300" height="93" /></td>
          <td><span style="font-size: 10px"><a href="http://www.facebook.com/idpaustralia" target="_new"><img style="display: block;" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_08.gif" width="101" height="93" /></a></span></td>
          <td><span style="font-size: 10px"><a href="http://www.twitter.com/idpaustralia" target="_new"><img style="display: block;" border="0" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_09.gif" width="94" height="93" /></a></span></td>
          <td><span style="font-size: 10px"><a href="http://www.foursquare.com/idpaustralia" target="_new"><img style="display: block;" alt="" src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_10.gif" width="104" border="0" height="93" /></a></span></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="http://i1227.photobucket.com/albums/ee439/idpaustralia/Adelaide%200112/Seminar-pathway_12.gif" alt="" width="70" height="114" align="right" style="display: block;" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

This should be working all good now, but let me know if you have any questions. All the best with your campaigns!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
cokeaddik, 4 years ago

Wow. Thanks for this. Truly appreciate this.

To avoid the colspan problem, how do I export my work from Photoshop to dreamweaver? Can I simply delete/remove the colspan without upsetting the layouts?

many many thanks.

roshodgekiss roshodgekiss, 4 years ago

Hi cokeaddik, you will need to open the .html file exported from Photoshop in Dreamweaver and manually change the code. Removing colspan will work if you make the 'container' table (ie. the table surrounding all content) one column, but when there are multiple columns involved, Dreamweaver can help ensure that you give colspan the correct value. Either way, it will require a bit of manual work. Good luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
cokeaddik, 4 years ago

Hi Roshodgekiss,

Thank you very much for the assistance.

What I did was your aerlier suggestion nested table. For the benefit of the other user I will explain what I have done, After I have saved my design in photoshop for HTML and Images.

1) I also make sure that all slices are not complex in its positioning/alignment.
2) Create a new HTML via Dreamweaver.
3) Insert a table on the size of the email. Mine is 600px
4) Downward direction, I will insert nested table row by row until I get to the bottom ( in that table that I have created on No 3)
5) each row I will insert pic/images as I go. (pretty easy).
6) Rows with multiple column ie with links to several links, I will make sure it has a border for visibility and easier to work on. I put it back to Zero once I completed the job
7) Voila... NO COLSPAN OR ROWSPAN!!!! Magic. Outlook 07 shows it all without any mess.

Roshod You are the BOSS!!!.. Thanks!

roshodgekiss roshodgekiss, 4 years ago

Haha, thank you so much for sharing your workflow here! It was a pleasure to help and I'm sure your notes will help others, too :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098