Margin, Padding, and Nested Tables - What works...

REFRESH FOR THE NOOBIES

With all the questions surrounding margin, padding and nested tables, here's the info you need to know:

Margin:  Margin is an effective way to create spacing outside the border of an object. Hotmail lacks support of top margins, so you may want to use padding or nested tables to create the desired effect.

Compatible Use:
• Use in tags such as a <div>, <p>, <h1>, <h2>, etc.

Incompatiblity:
• Hotmail: does NOT support top margins.
• Hotmail: you'll need to specify each margin (i.e. margin-left:10px; margin-right:20px; margin-bottom:5px;).
• Lotus Notes 6.5/7: only supports margin-left.

--------------------------------------------------------------------------------------------------------------------------------
Padding: Padding works similar to Margin, but instead creates spacing INSIDE the border of an object.

Compatible Use:
• Although it can be used in many tags, for best compatibility use in <td>'s.
• With the top/bottom padding bug in OL2007/2010, I recommend you nest a single cell table with the top/bottom padding you want within a cell (unless the whole row will have the same top/bottom padding).

Incompatiblity:
• Outlook 2007/2010 will only display padding when used in the <td> tag.
IMPORTANT!  In Outlook 2007/2010, <td>'s within the same <tr> row must have the same top and bottom padding or breaks may appear.
• Will not work in Lotus Notes 6.5 / 7.
• Not supported in <img> tags in Outlook 2007/2010 and Lotus Notes 8.

--------------------------------------------------------------------------------------------------------------------------------
Nested Tables: A 100% compatible method to create a spacing effect within a table.  By simply nesting a table within a cell of another table, you'll be able to create the proper spacing you desire.

Compatible Use:
• Simply place a table within the cell of another table, and size the new table's cells based on the spacing you need.
• To align a smaller table within a larger table cell, set the table to align=left =right or =center.
• Can be used to surround an image and provide spacing around it, especially for clients not supporting vspace/hspace.

Incompatiblity:
• None so far.  Just make sure all <td>'s have a set width and that everything adds up correctly.
• I recommended NOT using rowspans or colspans, as they may cause nasty breaks to appear in some clients.  If you use properly nested tables and cut up your design using rows, you shouldn't need rowspans or colspans.

================================================================

If you have any feedback or questions, please add them here.

Thank you,
Brian

BThies BThies, 7 years ago

Bump - Updated cause of padding/break issues in Outlook 2007.


Brian Thies
Professional Email Developer
Thies Publishing
Oskar Oskar, 7 years ago

Thanks for the post, appreciate it. It's weird having to code like it's 1998 again..

BThies BThies, 7 years ago

Bump.. wish there was a way to sticky this post.


Brian Thies
Professional Email Developer
Thies Publishing
Dave Dave, 7 years ago

Thanks for sharing this, all great info.

BThies BThies, 7 years ago

Bump..


Brian Thies
Professional Email Developer
Thies Publishing
watershed, 7 years ago

Spot on, Brian. I've just come to much the same conclusions myself.

watershed, 7 years ago

A provisional qualification to Brian's recommendations above...

My experience so far is that vertical (top and bottom) padding and margins on core block elements such as headings and paragraphs generally does work but that horizontal (left and right) padding can only be achieved reliably with the use of table cells.

Incidentally, <th> seems to work as well as <td>.

BThies BThies, 7 years ago

WTB Sticky Support

Bumpity bump.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

The quarterly bump...  and the crowd shouts Sticky!  Sticky!


Brian Thies
Professional Email Developer
Thies Publishing
madebyspark, 7 years ago

Great info... thanks!

I am still having issues with that pesky break showing up in my sidebar. Was wondering if you could maybe take a peak?

You can see the code here:
http://corecubed.com/news/09/11/CM.html

The weird break shows up right near that facebook image in Outlook 2007.

Any help would be greatly appreciated! Cheers~

Danielle

BThies BThies, 7 years ago

Several things:

-  In the table on the left, cellpading should be cellpadding

-  You have quotes within your code that should be &quot;  (can display funky characters in some e-mail clients)

-  Be aware, "Margin" isn't fully compatible / acts goofy with Hotmail and Lotus Notes 6.5/7.

-  Be aware, "Padding" isn't compatible with Lotus Notes 6.5/7.  If you're not concerned with those clients, ignore them.

-  In Outlook 2007, all <TD>'s in a single <TR> row need the same top and bottom padding or breaks may appear (not in all cases, but it does happen a lot)

-  PNG images are not supported in Lotus Notes 6.5/7.  Best to use GIF or JPG.

If that doesn't resolve the issue, feel free to shoot me an e-mail.

EDIT:  Tested and found it displayed fine in Outlook 2007.  I believe it was the first item that fixed it.

Brian


Brian Thies
Professional Email Developer
Thies Publishing
madebyspark, 7 years ago
BThies :

Several things:

-  In the table on the left, cellpading should be cellpadding

-  You have quotes within your code that should be &quot;  (can display funky characters in some e-mail clients)

-  Be aware, "Margin" isn't fully compatible / acts goofy with Hotmail and Lotus Notes 6.5/7.

-  Be aware, "Padding" isn't compatible with Lotus Notes 6.5/7.  If you're not concerned with those clients, ignore them.

-  In Outlook 2007, all <TD>'s in a single <TR> row need the same top and bottom padding or breaks may appear (not in all cases, but it does happen a lot)

-  PNG images are not supported in Lotus Notes 6.5/7.  Best to use GIF or JPG.

If that doesn't resolve the issue, feel free to shoot me an e-mail.

EDIT:  Tested and found it displayed fine in Outlook 2007.  I believe it was the first item that fixed it.

Brian

Thanks for the reply. I am not finding the misspelled cellpadding anywhere. And I am still getting that crazy whitespace in my sidebar. I only have two TDs that are adjacent... the sidebar and the mainbar. Both have the same padding. Can the width have anything to do with it?

Here is my updated code:
http://www.corecubed.com/news/09/11/CM.html

Any additional help would be great!

BThies BThies, 7 years ago

I noticed that three of the images in the left column are displaying in a row now causing the entire left column to stretch:

Change this:

<p><a href="http://www.facebook.com/home.php#/pages/corecubed/81975422299?ref=search" target="_blank"><img src="http://www.corecubed.com/news/09/11/images/facebook.jpg" border="0" /></a><a href="http://www.linkedin.com/pub/merrily-orsini/0/b90/41a" target="_blank"><img src="http://www.corecubed.com//news/09/11/images/linkedin.jpg" border="0" /></a><a href="http://twitter.com/MerrilyO" target="_blank"><img src="http://www.corecubed.com/news/09/11/images/twitter.jpg" border="0" /></a></p>

To this:

<p><a href="http://www.facebook.com/home.php#/pages/corecubed/81975422299?ref=search" target="_blank"><img src="http://www.corecubed.com/news/09/11/images/facebook.jpg" border="0" style="display:block;" /></a><a href="http://www.linkedin.com/pub/merrily-orsini/0/b90/41a" target="_blank"><img src="http://www.corecubed.com//news/09/11/images/linkedin.jpg" border="0" style="display:block;" /></a><a href="http://twitter.com/MerrilyO" target="_blank"><img src="http://www.corecubed.com/news/09/11/images/twitter.jpg" border="0" style="display:block;" /></a></p>

Let me know if this helps.  If not, can you send a screenshot of what it looks like with the issue.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

bump for OP


Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098