Home/ Questions/Q 6803701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:22:36+00:00

I need to set a template for mailing using a table, I looks fine:

  • 0

I need to set a template for mailing using a table,

I looks fine:

but in Ie7 it does not respect its dimensions/margins/paddings

Markup:

HTML:

<table>
        <tr>
           <th>
                <h1>Esta semana hablamos de....</h1>
            </th>
        </tr>
        <tr>
           <td>
                <h2>Nuestra Cultura</h2>
            </td>
        </tr>
        <tr>
           <td>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                </p>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 
                </p>
            </td>

        </tr> 
    </table>

CSS:

body{
        background:#fAfAfA;
    }

    table {
        position:relative;
        width:650px;
        background:url(fnd.jpg) center bottom no-repeat;
        font-family:'Myriad Pro',arial;
        margin:0 auto;
        padding:0 25px 85px;
        border-collapse:collapse;
        border-spacing: 0;
        display:block;

    }

    table th h1 {
        font-size:35px;
        color:#808080;
    }

    h1 {
        text-align:left;
    }
    table td h2 {
        font-weight:700;
        margin:0;
        font-size:21px;
    }
    h2,p {
        padding:0px 0px 0px 20px;
    }
    h2{
        padding-top:20px;}
        table td {
        background:#FFF;
    }
    td,th,tr {
        border:0;
        margin:0;
        width:600px;
    }

-edit-

PRINTS

enter image description here

I don’t think i am using any special property, am i?

-EDIT-

Basically i only need a 25px padding in the table, but it doesn’t work!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Few things to take care of:

    • don’t set paddings on <table> element – IE does not work ok with that
    • always define font-family for your headings – IE will ignore and use default fonts instead if font family is defined only on body (serif usually)
    • write all your css styles inline (I left them as in sample but you should really write all css inline)
    • always define vertical-align:top; to your td and th elements unless you want it to be something else
    • always define colors to your <a> elements
    • always set <table cellpadding="0"> directly on the table element – css does not reset cellpadding property.
    • DO NOT use floats – never. You can use divs for wrapping and setting widths – just don’t float them
    • in some cases on longer mailings headings or paragraphs tend to disappear while scrolling the mail in IE – fix that by applying zoom:1 to problematic element.

    There are some other catches but already following this notes will give you satisfactory results cross platforms.

    Try this solution:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    body{
        background:#fAfAfA;
    }
    #wrapper {
        width:650px;margin:0 auto;
        padding:25px;
      background:red;
    }
    table {
        position:relative;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        border-spacing:0;
    }
    table th {
        padding:0;
        text-align:left;
        vertical-align:top;
    }
    table th h1 {
        font-size:35px;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        color:#808080;
        margin:0;
        padding:0 40px 15px 0;
    }
    table td {
        background:#fff;
        padding:0 20px;
        vertical-align:top;
    }
    table td h2 {
        margin:0;
        font-size:21px;
        font-weight:bold;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        padding:20px 0;
    }
    table td p {
        margin:0;
        padding:0 0 20px 0;
    }
    </style>
</head>
<body>
<div id="wrapper">
<table cellpadding="0">
        <tr>
           <th>
                <h1>Esta semana hablamos de....</h1>
            </th>
        </tr>
        <tr>
           <td>
                <h2>Nuestra Cultura</h2>
            </td>
        </tr>
        <tr>
           <td>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                </p>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 
                </p>
            </td>

        </tr> 
    </table>
</div>
</body>
</html>
    • 0