1

I made an html email on dreamweaver, and used margin for some text.

for example: 

  <td width="453" height="115" bgcolor="#18b581"><p style="font-family: Arial, Helvetica,    sans-serif; margin-left: 25px;"><strong><font size="4">Hello world?</font>

this shows perfect in dreamweaver. when i send it through outlook, i save it as outlook template. i send it to my outlook account and my hotmail. the margins work on my outlook, but the margins does not sure on hotmail, i have no idea why!!

update: 

         <td  colspan="2" bgcolor="#FFFFFF"><h3  style="font-family: Arial, Helvetica, sans-serif; color:#1d95a5; padding-left: 25px; padding-top:30px; ">What are the benefits of the NP-C directory?</h3>
   <p  style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 25px; padding-right: 22px;   padding-top:-20px;">The NP-C directory offers you the opportunity to: </p>
   <ul style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 80px; padding-right: 51px; padding-top:-12px;">
  <li><strong>Connect</strong> with healthcare professional colleagues in your local                   country/area who have a shared interest in NP-C</li>
  <li><strong>Network</strong> with healthcare professionals around the world to share                 experiences of NP-C</li>
  <li><strong>Exchange</strong> the latest news and information about NP-C</li>
  </ul>
al123
  • 561
  • 9
  • 25

2 Answers2

3

Margin is not supported in Outlook.com. Instead use padding in the parent <td> element.

Don't do this:

<td>
  <p style="margin-left:25px;">Paragraph</p>
</td>

Instead do this:

<td style="padding-left:25px;">
  <p>Paragraph</p>
</td>
John
  • 11,985
  • 3
  • 45
  • 60
  • check my updated , the problem is for each sentence i have alreadt added a style in the

    so with that do i have to remove the style and add it on the

    – al123 Jan 10 '14 at 09:40
  • also i come to no that padding doesnt work in outlook?? – al123 Jan 10 '14 at 09:46
  • Padding works, but only use it in `` tags. Support for other html tags can be spotty. If you want to change the indent (padding) per paragraph, either create separate table rows and style their td's, or use multiple ` ` in your text to add spaces/indentations. – John Jan 10 '14 at 15:13
  • @John I have a similar [question](https://stackoverflow.com/questions/51003595/email-design-looking-different-in-outlook-in-comparison-to-other-email-clients/51003795#51003795). I am wondering if you can help me out. – flash Jun 23 '18 at 18:27
0

Yup, welcome to the hazards of HTML email!

Check out the email standards project, they keep a catalog of all the differences between various browsers.

Best suggestion is to try and avoid relying on padding and margins and instead use fixed width table cells to position elements.

evilscary
  • 2,097
  • 5
  • 23
  • 33
  • i have also added images, in rows in a table. however in browser the images leave a blank space in the middle. but this is only in hotmail. outlook is fine. – al123 Jan 09 '14 at 14:45