Outlook additional spacing - <p> tags and <span> tags

Question

I am creating a HTML email currently and am having a hard time with what happens when I FORWARD the email. It comes through fine to the inbox, but then develops issues when forwarding. I have taken the source code of the forwarded item and it looks as though it is re configuring my tables so that they are in divs, and between each table there is a

<p> 

tag with a

<span style="display: none"> 

inside it and

<p>&nbsp;</p> 

inside that..

This would be absolutely fine if this was consistent, but instead I find that the middle

<p> 

tag does not have the span, and therefore enters a

<p>&nbsp;</p> 

between two of my tables, creating a big gap in my lovely border!

Does anyone know if this is either content related, or if my tables need to have specific attributes to prevent this from happening, I can see no difference between them and the first tables; which seem to work absolutely fine.

Answer 1

You mentioned that it added new <p> tags between, not too sure about that - there may be some spaces in your html content. Outlook is known to wrap <p> tags around elements in emails (usually class msoNormal, or something like that). This affects your email on forwarding and unfortunately there is no way to avoid it, only ways to minimize and hide it. If you zero out the margin and padding in your style tag, this should take care of it for most clients. For forwarding yo Gmail though, it is unavoidable as Gmail strips the style tag.

One way to minimize the gap is to use table rows instead of tables. The gap it creates is much smaller - something like a couple of pixels vs. about 20 pixels of unwanted space.

One way to hide it is to make sure you put all the areas that will separate into a parent container that has the same background color. This way when it does spread your email vertically, you won't get any horizontal bars of a different colors in your email.

Answer 2

yes same for me i created html and send it to outlook and outlook web mail same thing happen that p tag get

<p class="MsoNormal" style="/* margin-bottom:22.5pt; */"><b><font size="4" color="#4d5d68" face="Calibri"><span style="font-size:13.5pt;color:#4D5D68;text-transform:uppercase;font-weight:bold">NEW NOTES HAS BEEN ADDED.</span></font></b><b><font size="4" color="#4d5d68"><span style="font-size:13.5pt;color:#4D5D68;text-transform:uppercase;font-weight:bold"><o:p></o:p></span></font></b></p>

see this and anyone who bypass it on outloook?

it adds p style like this style="/* margin-bottom:22.5pt; *