I'm having somewhat reoccurring issues with extra spacing being added to the right of image in Outlook. Has anyone else had this issue, and what is a workaround or remedy?
Just a little background -- the image is in it's on table cell and has the display:block style applied to it. The containing table row has the style line-height:0 applied.
Any help would be appreciated, either through the forum, or Twitter @substate.
Hi substate, first up, does the table cell have an align= or valign= applied to it? Sometimes this can cause gaps. Otherwise, feel free to post your code here in this thread (or send it to our support team) and we'll take a look at it.
Here's the code:
<tr> <td colspan="2" bgcolor="#FFFFFF" style="line-height:0;"><img src="main.jpg" alt="an evening with the Phoenix Symphony" style="display:block" /></td> </tr>
The complete email code is here: http://asufoundation.org/gfx/email/WP/symphony/invite.html
The issue seems to be sporadic, as sometimes this extra space does not show up to the right of the hero image, and sometimes it does. Any help would be greatly appreciated!
You have <td>'s with a colspan of 2, yet there are no rows with 2 individual <td>'s defined.
• <td>'s should have a defined width
• Colspans/rowspans can cause unexpected results. Use nested tables instead.
• Close image tags with a />
• Use <br /> instead of <br>
• Line-height:0 is unnecessary
"Colspans/rowspans can cause unexpected results..." Not if you use them correctly.
I've witnessed and assisted on many coding issues in this forum in which colspans/rowspans were used properly but still displayed gaps and breaks. Upon replacing with a nested table the issues went away.
Also, in creating a best practice scenario for newer and older email coders, the nested table more often prevents mistakes in adding rows and columns correctly.
I've never had any problems with colspan en rowspan, but I agree on your argument that with nested tables the html is easier to manage and easier to customize and also less prone to errors.
Another reason would be major changes to a longer design. If the design is tied up in colspans or rowspans, changing any part of it will mean the entire coding project is affected. By keeping elements separate, you make it easier to swap out code.
That's true. We have a couple of customers where we've used this way of thinking and the customer has no problems to customize the newsletter.