I know this won’t be the first mention of Outlook breaking a HTML email and it certainly won’t be the last, but I’m going nowhere fast trying to fix my particular problem.
The design looks fine in FW and works okay in Mac email clients and Outlook 2003, but breaks in the clients’ Outlook (2007 or 2010 I think).
The link shows the HTML file. It breaks on the fourth white block down, with a horizontal space appearing through the whiteboard pic and the adjacent text.
I know it’s difficult to diagnose a table-based layout and I’ve spent hours trying all manner of things, thinking it was FW or something I’d done, but I’m increasingly of the opinion that it must be Outlook itself causing the problem. I’ve read about a horizontal gap that appears 1800px down in Outlook, but this isn’t quite that far down.
I’ve now had the client tell me the above version is still broken, so I’ve started again from scratch.
The first version was built using separate divs containing ‘child’ html and graphic elements and using the ‘create email’ action.
I’ve now rebuilt it using a single multi-row table and the same action, but the client tells me it’s still ‘broken’ at the same point with a horizontal space forcing the whiteboard picture and text downwards.
Can anybody please tell me how to get around this problem, irrespective of whether it is me or Outlook causing it!
This is your page viewed using Firefox’s 3d inspector
It shows the likely break points across the layout (which I cannot see normally online)
It might be worth adjusting the layout to have the header ‘Does your…’ full width then below that the first 2 paras occupying the same ‘row’ as the image (so that the image and 2 paras have the same height)
And then the last para and image could also (as they do currently) share 1 row.
The client say the gap appears below the title now, but interestingly he says that if he zooms in or out, the gap moves to different parts of the eshot. Surely this has got be something to do with Outlook and not the eshot? It has been tested on three PCs with the same result, but I’ve also done several long eshots for them recently without this problem, so I’m stumped!
Okay, i’ve made all the text into the default small, medium etc sizes. The text looks roughly the same in Safari, but it looks rubbish in Apple Mail because the text has shrunk considerably but the table rows have stayed the same height leaving big white spaces below the text.
I’ve sent it to the client who says the text looks larger than previous and that the gap has moved above the go/no go magnets.
Sorry Joe, I’ve just looked at your screenshot, but I’m not sure if that’s even the same problem! There is no visible grey gap which stretches across the eshot forcing text down but cutting straight through graphics. Yours has text forced down but no actual gap! Maybe the latest Outlook views differently to 2010.