how to get rid of class MsoNormal from emailers

Question

Hi friends I am getting stuck trying to create an emailer ... I designed an emailer then cut that design into HTML and send that emailer using office 2007 to my gmail... when i checked emailer in my gmail i got this

There are spaces showing after debugging I found there are <p class="MsoNormal"> after every <tr>. To reset this I also applied following style but it doesn't work... please help me guys

CSS

body {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
html {width: 100%;} 
body {width:100% !important;}
.ReadMsgBody, .ExternalClass {width:100%; display:block !important;}
table td {border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;} 
#backgroundTable {margin:0; padding:0; width:100% !important;} 
p.MsoNormal {margin: 0px}
img{display:block;}

Ketti

Microsoft products always add a lot of extra rubbish into your html. A quick fix would be to go to this page, delete all the stuff in the editor, then click on the paste from word icon (and paste your template in), then after you have done this copy the content back out of the editor and it should have got rid of all your extra microsoft rubbish – Aftergrowth

Can you post your html, at a glance I thought you were missing display block on your images but you defined it. min-width your images to actual pixels and let me know if that worked. – Pendentive

Answer 1

One trick you could try (work in most cases) is adding this style to every td where the image is

<td style="line-height: 25%">

If that doesn't work, try applying it on your <tr> (I honestly don't know how it works, just that it works in some cases)

Gerlach

I have no idea how on earth you figured this out, but thank you ... this finally ended a day long search for a workaround. – Olszewski

Seems to work in Gmail on the desktop but the gaps still show in the iOS Gmail app. This is when sending the email with Outlook. – Entourage

@ColinOakes have you solved the issue when sending from MS Outlook to Gmail (Android/iOS)? Same is happening to me: #54616070 – Bathetic

@Bathetic I don't think we ever found a way around the issue :( – Entourage

Answer 2

There is no way to prevent msoNormal tags when sending from Outlook. You can hide the effects in many clients, but as Gmail needs inline CSS (strips the style tag), it is not possible to avoid in Gmail. Here is a related article on the topic

There are ways you can design around it however. You could use one large (uncut) background image and put all of the content in front for example.

Rotator

Answer 3

How about you put the display: block; per image?

Ex:

<img src="YOUR.IMG.SRC" alt="" style="display: block; margin: 0; padding: 0;" border="0"/>

This worked for me. The hardest part is removing that p.MsoNormal on Outlook, still figuring that out since Outlook's recent versions still has that bug. And also, put ; on every style you type. CSS would be messy if not.

Secretive

On Gmail, add: style="line-height: XXpx;" - XX = the pixel height of the image. – Secretive

Answer 4

I think i have understand the reason: Its interesting with some Outlook document features interesting with its tags and memory security requirements vault etc..

Simple solution :

p:after {
   content: none;
}

Bushbuck