таблица не будет соответствовать 25px отступам в IE7 - PullRequest
Новая
       23

таблица не будет соответствовать 25px отступам в IE7

1 голос
/ 14 ноября 2011

Мне нужно установить шаблон для рассылки с использованием таблицы,

Я хорошо выгляжу:

но в Ie7 он не учитывает свои размеры / поля / отступы

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-

ПРИНЦ

enter image description here

Не думаю, что я использую какое-то специальное свойство, не так ли?

-EDIT-

В основном мне нужно только заполнение 25px в таблице, но это не работает !!!

1 Ответ

2 голосов
/ 14 ноября 2011

Несколько вещей, о которых нужно позаботиться:

  • не устанавливайте отступы для элемента <table> - IE не работает с этим
  • всегда определяет семейство шрифтов для вашегозаголовки - IE будет игнорировать и использовать шрифты по умолчанию вместо этого, если семейство шрифтов определено только для body (обычно с засечками)
  • записать все ваши стили CSS в строке (я оставил их как в примере, но вы должны действительно написать все CSSinline)
  • всегда определяйте vertical-align:top; для ваших td и th элементов, если только вы не хотите, чтобы это было что-то другое
  • всегда определяйте цвета для ваших <a> элементов
  • всегда устанавливать <table cellpadding="0"> непосредственно в элементе таблицы - css не сбрасывает свойство cellpadding.
  • НЕ использовать float - никогда.Вы можете использовать div для переноса и установки ширины - просто не используйте их
  • , в некоторых случаях при более длинных почтовых сообщениях заголовки или абзацы, как правило, исчезают при прокрутке почты в IE - исправьте это, применив zoom:1 к проблемнымelement.

Существуют и другие уловы, но уже следуя этим примечаниям, вы получите удовлетворительные результаты на разных платформах.

Попробуйте это решение: 

<!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>
...