Member Avatar for tscina

I need to do the following formatting in my email as instructed to me. As I've read and searched around, emails are supposed to use html1 to 4 and inline styling. I've tried using inline styling using margins but it's just a pain. It's not working in outlook and I'm just pulling my hair in frustration. Can anyone help?

  • 3 Contributors
  • 13 Replies
  • 223 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tscina

Dani AI

Generated

A short diagnosis and a practical path forward.

Outlook for Windows uses the Microsoft Word HTML engine, so many modern CSS rules (including margin behavior on divs and some table elements) are ignored or applied inconsistently — that is why Gmail/Yahoo can look fine while Outlook breaks the layout. (learn.microsoft.com)

Practical checklist (apply in order):

  • Fix HTML structure first: open the <body> before any visible content and close every <tr>/<td> properly — malformed tables can make Outlook fall back to unpredictable layout. (developer.mozilla.org)
  • Stop depending on CSS margins for horizontal spacing. Use table-based layout and safe attributes (width, cellpadding, cellspacing, align, valign) and/or an empty spacer <td> to create left/right gaps. For vertical spacing prefer spacer rows, border-top with the background color, or explicit spacer cells rather than p/div padding that Outlook may ignore. (emailonacid.com)
  • Inline all styles (use an inliner like Juice / inline-css before sending) so clients that strip head styles still see the rules. (npmjs.com)

Example pattern (replace the margin on the logo with a spacer cell):

<table cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td width="75" valign="top"><img src="logo.jpg" width="75" style="display:block;border:0;"></td>
    <td width="50">&nbsp;</td>
    <td valign="top">Date, name, address, etc.</td>
  </tr>
</table>

Outlook-specific refinements: use MSO conditional comments to inject Outlook-only fixes (or VML for complex background images), and test in an email previewer across clients. Conditional comments let you supply Outlook-only table markup or CSS where needed, but be aware webmail/outlook.com behaviors vary. (emailonacid.com)

Addressing what others said: was right to flag the misplaced <body> and missing </tr> — fix those first. ’s tip to consult client CSS support tables is good; use them to decide which CSS to rely on before trying workarounds.

Recommended Answers

All 13 Replies

Member Avatar for Member #949455

It's not working in outlook and I'm just pulling my hair in frustration. Can anyone help?

Have you test it out on gmail or yahoo?

Member Avatar for JorgeM

If you post your HTML code that would be helpful.

Member Avatar for tscina

Yes I've tested it out on gmail and yahoo. Actually gmail and yahoo was a lesser pain. They actually recognized the margins but outlook is certainly giving me a hard time. I'll post my codes once I get to the office. Sorry about that lol

Member Avatar for tscina

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<table border="0" cellspacing="30">
<tr>
<td valign="top"><img src="logo.jpg" width="75" style="margin:0 0 0 50;"/></td>
<body>
EOD;

$message .= "<td style=margin:50 0 0 0;><font face=candara>" .date("F d, Y "). "<br><br>";

$message .= "<b>".$row_Recordset1['First Name']."&nbsp".$row_Recordset1['Middle Initial']."&nbsp".$row_Recordset1['Last Name']."</b><br>";
$message .= $row_Recordset1['Position']."<br>".$row_Recordset1['Company Name']."<br>".$row_Recordset1['Corporate Address']."<br><br>";
$message .= "<p>Dear ".$row_Recordset1['Last Name'].":</p>";

$message .="// the rest of the letter 
<td valign=bottom style=margin: 50 50 0 0;><font size=-2>
//more texts
</font>"
</td>
</table>
</body>
</html>";
Member Avatar for JorgeM

I noticed that included some elements before the opening <body> tag. You should move those lines (6-9) down after the opening body tag.

You also didnt include the closing table row </tr> tag inbetween 22-23.

not sure what lines 10-18 are all about. If that is PHP code, it should be in between PHP tags, I beleive (I'm not a PHP developer so excuse the ignorance..)

<?php

...

?>
Member Avatar for tscina

Those are codes so that the mail would be told to read the email as html file. I can view the file the formatting is the problem. Table formatting is giving me so much headache

Member Avatar for Member #949455

This more like CSS issue than PHP issue. It's good thing you post this here. I'm not a good designer. You need to balance your email formatting. Regarding about Outlook, here is some codes you might want to used to fixed that issue:

http://www.campaignmonitor.com/css/

Edited by Member #949455 because: grammer
Member Avatar for tscina

Actually my php codes are okay. Everything I want to print is working fine just that the design is really a pain. :/

Member Avatar for JorgeM

Again, your HTML structure has syntax errors. See my previous post.

Member Avatar for tscina

lol my codes are fine -_- im just trying to find ways to format tables since this type of designing was done years ago.

Member Avatar for tscina

okay so I made my codes understandable. (The way I posted it looks weird but I can't include my every code as it has some sensitive data.) So here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<table border="0" cellspacing="10">
    <tr>
      <td valign="top">
      <img src="logo.jpg" width="75"/>
      </td>

      <td>
      <br /><br /><font face="candara"><?php echo date("F d, Y "); ?><br><br><br />
      <b><?php echo $row_Recordset1['First Name']."&nbsp".$row_Recordset1['Middle Initial']."&nbsp".$row_Recordset1['Last Name']; ?></b><br>
      <?php echo $row_Recordset1['Position']."<br>".$row_Recordset1['Company Name']."<br>".$row_Recordset1['Corporate Address'];?><br><br><br>
      <p>Dear <?php echo $row_Recordset1['Last Name']; ?>:<br><br></p>
      </td>
    </tr>

    <tr>
      <td>
      &nbsp;
      </td>
      <td>
      <p>Letters letters</p> 
  <br><br>
      </td>
    </tr>

    <tr>
    <td>&nbsp;</td>
      <td>
      signature
      </td>
      <td width="150"><font size=-1 color="#999999" face="candara">
      contact info
      </td>
    </tr>

</table>

Now they look like this but I was told to make it look like this

Member Avatar for JorgeM

Ok, is there a specific reason why you are doing this with a table? Attached is the result of your code. I added a border so that we can see where the cells will be placed. In your picture is seems that you want the contact info to be shifted down. If you use this table format, then I guess you can just add some <br/> elements before the contact info text.

In your original post you mentioned the use of "html1 to 4". What are you referring to? Do you really mean <h1> to <h4> (headings)?

Sorry, but I'm trying to understand what it is you are doing and what problem have you encoutered. The way that it displays within an Outlook email should be very close, if not exactly to what it would look like within the browser, assuming the email's format is HTML. table1

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.