Problem with Oulook, Image and Text.

Hi, I've been dealing with this problem all day and after checking the forum for a while I decided it was better to ask for help.
I have a table with 2 columns, main column is 350w and the sidebar is 170w, I use 20px for cellspacing. A Total width of 580px. I want to be able to add images as wide as the main column. However when I add a picture which is 350px wide Outlook '07 tries to fit the description text NEXT to the image adding about 30 extra pixels.

It looks perfectly fine on gmail, ymail, aol, hotmail. (althought they keep chaing the font, any reason why?)
When viewing it on dreamweaver(Live View off) I can see it adding the extra pixels as well =\

Here's my code:

<table width="580" border="0" cellspacing="20" cellpadding="0">
    <tr>
        <td width="350" cellspacing="0" align="left" valign="top" class="mainbar">
            <p>Greetings [fullname,fallback=]</p>
            <repeater toc='true'>
                <h2>
                    <$title link='true' default='Enter your title'$>
                </h2>
                <img src="<$imagesrc link='false'$>" width="350" alt="IMG" align="left" />
                <$description default='<p>Enter your description</p>'$>
                <p class="top"><a href="#top">back to top</a></p>
            </repeater>
        </td>
        <td width="170" cellspacing="0" align="left" valign="top"><h4 class="meta">In this issue</h4>
            TOC, FORWARD, UNSUBSCRIBE.
        </td>
    </tr>
</table>

Styles are only used for text and background color.
I tried setting up the image under the P tag but it only made the text show up a line lower than the image.
I tried playing with margins and other settings with no results.
Any clue???

fyredefyre fyredefyre, 6 years ago

Well I'd try either adding a line break underneath the image or use a nested table instead to separate the image and text into individual cells.

Here's how that could work:

  <table width="350" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><h2>
                    <$title link='true' default='Enter your title'$>
                </h2></td>
                  </tr>
                  <tr>
                    <td><img src="<$imagesrc link='false'$>" width="350" alt="IMG" align="left" /></td>
                  </tr>
                  <tr>
                    <td><$description default='<p>Enter your description</p>'$></td>
                  </tr>
                  <tr>
                    <td><p class="top"><a href="#top">back to top</a></p></td>
                  </tr>
                </table>

www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
cballenar, 6 years ago

Well the problem with that solution is that the text wont wrap around smaller images. I really like how CampaignMonitor adjusts the settings for different sizes of images and it works flawlessly in any web browser. It sucks that Outlook messes it up

I found a workaround by adding "$imagesrc" above the entire repeater. That way I can have a main image at the top and at the same time I can add smaller images within the content but it's not exactly what I wanted =\

Any other suggestions?

Here're some screenshots:

What it should look like

What it looks like on Outlook

fyredefyre fyredefyre, 6 years ago

Well that's a bit of a tricky one considering you want to use repeaters with images of such varied widths. Considering the layout would use wrapping and non-wrapping images you may be forced to continue to use your main image outside the repeater itself.

The only thing I could suggest is set your image to the full width of the cell, that way all text is forced to the line below.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre

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