Text overlaps normal image?

Hi all,

I've really tried hard making my template as basic as possible, however, I still have one major issue. My table is 600px wide and I'm only using one single repeater with a content like this:

<img width="600" src="<$imagesrc link='true'$>" align="right">
<$description default='<p>Text here.</p>'$>

Now, when I use images of say 300px width it works perfectly, aligns right and the text flows nicely. When I use images of 550-600px it looks very odd. The text overlaps the image in edit and sits behind in preview - I didn't even know this was possible in regular html.

Of course it's only happening in IE7/Outlook 6. In my FF the text jumps down below the 600px image as it should. The error looks like this:


If you need more info, please let me know. Thanks a lot.

Stig Stig, 8 years ago

Hi Oskar,
I see that your screenshot is from the editor. Have you tried the design test?

This is a tricky one, since you want the element to behave differently depending on it's width. Combined with the inconsistent email client/browser support for floating/clearing.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Oskar Oskar, 8 years ago

Hey Stig, thank you for the answer.

Indeed, I have tried the design test and it does fail on some like AOL and Outlook. The design test hasn't been all that succesfull for me the few times I've tried it but that's another story.

I don't want it to behave differenty depending on it's width. When the image is 300px (of possible 600) the text flows like it's supposed to. When the image is 600px (full width) the text overlaps the image, which is very very weird and not normal browser behaviour, as far as I know?

Stig Stig, 8 years ago

Sure, I agree, but I meant you want it to behave differently since you want it to float when it's 300px and clear when it's 600px. If you were only trying to do one of those, it would be easy.

Do you mean the design test hasn't been successful, or the results haven't?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Oskar Oskar, 8 years ago

Heh, well you could argue that that I want is float when it's 300px and clear when it's 600px, sure. But with a container of 600px I guess I wouldn't need to use any floating or clearing, just a simple align="right".

I've got no idea as to why the text insist on overlapping my image in IE7, however, I managed to trick it by setting my <repeater> inside it's own table cell which fixed it (more or less).

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free