Отточие

[Racemus]

Всем добрый день.

Меня интересует вопрос создания отточия в верстке HTML письма.

Тема создания этого элемента разными способами поднималась и здесь, и на других сайтах, но речь всегда идет просто о HTML и CSS. В моей ситуации есть ограничения E-mail HTML.

Я уже сломал голову. Может кто-то сталкивался с этой проблемой?

[Быколай]

Досконально вопрос не курил и могу ошибаться, но css сложно передать в email.

Кстати, вот вроде неплохая статья по сабжу: http://blog.feedgee.com/tag/css-%D0%B2-email/

[Racemus]

  On 4/11/2012 at 7:41 PM, Быколай said:

Досконально вопрос не курил и могу ошибаться, но css сложно передать в email.

Кстати, вот вроде неплохая статья по сабжу: http://blog.feedgee.com/tag/css-%D0%B2-email/

Очередной copy/paste. Такие статьи читал, они не отвечают на мой вопрос.

Вместо этих статей можно просто пользоваться этим http://www.emailology.org/#3

Вопрос остаётся открытым (((

[Great Rash]

А никак походу. border: 1px dotted; мало кто поймет, бекграунд не отображается в некоторых почтовых клиентах (MS Outlook 100%, проверено на себе).

[Racemus]

  On 4/12/2012 at 7:52 AM, Great Rash said:

А никак походу. border: 1px dotted; мало кто поймет, бекграунд не отображается в некоторых почтовых клиентах (MS Outlook 100%, проверено на себе).

Я пользуюсь The Bat! Он вообще не отображал раньше рисунков, а сейчас предлагает загружать, но я ориентируюсь больше на web-интерфейсы (mail, rambler, yandex, gmail,...)

[Great Rash]

Ну раз только на веб-интерфейсы, тогда сделать таблицу из 3-х ячеек и средней ячейке сказать border-bottom: black 1px dotted;

[Racemus]

  On 4/12/2012 at 1:15 PM, Great Rash said:

Ну раз только на веб-интерфейсы, тогда сделать таблицу из 3-х ячеек и средней ячейке сказать border-bottom: black 1px dotted;

Такая мысль была. А как отправить правую ячейку в правый край?

[Great Rash]

<table width="100%">
  <tr>
    <td width="1%">лево</td>
    <td width="100%" style="border-bottom: black 1px dotted;"> </td>
    <td width="1%">право</td>
  </tr>
</table>

[Racemus]

  On 4/12/2012 at 2:12 PM, Great Rash said:

<table width="100%">
  <tr>
    <td width="1%">лево</td>
    <td width="100%" style="border-bottom: black 1px dotted;"> </td>
    <td width="1%">право</td>
  </tr>
</table>

Хорошо. Спасибо. Уже вариант.

А вертикально выровнять как? Чтобы точки были на уровне текста.

[Быколай]

  On 4/12/2012 at 2:34 PM, Racemus said:

А вертикально выровнять как? Чтобы точки были на уровне текста.

м.б. вроде такого?

<table width="100%">
  <tr>
      <td width="1%"><p style="position: relative; top: 4px">лево</p></td>
    <td width="100%" style="border-bottom: black 1px dotted;"> </td>
      <td width="1%"><p style="position: relative; top: 4px">право</p></td>
  </tr>
</table>

http://jsfiddle.net/NDsYH/

[Racemus]

  On 4/12/2012 at 5:38 PM, Быколай said:

  On 4/12/2012 at 2:34 PM, Racemus said:

А вертикально выровнять как? Чтобы точки были на уровне текста.

м.б. вроде такого?

<table width="100%">
  <tr>
      <td width="1%"><p style="position: relative; top: 4px">лево</p></td>
    <td width="100%" style="border-bottom: black 1px dotted;"> </td>
      <td width="1%"><p style="position: relative; top: 4px">право</p></td>
  </tr>
</table>

http://jsfiddle.net/NDsYH/

Всё прекрасно, но position в e-mail работать не будет скорее всего. Я не успел еще всё протестировать, но вряд ли.

[Switch74]

margin используйте

[Racemus]

  On 4/13/2012 at 7:10 PM, Switch74 said:

margin используйте

Либо я не умею, либо не получается. Если знаете как, подскажите, пожалуйста.

[Racemus]

Проблему решил другим способом. В письмах должно работать. Но проверил еще не везде. Кому интересно:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1%">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="line-height: 0.2;"> </td>
        </tr>
        <tr>
          <td nowrap><p>лево лево</p></td>
        </tr>
      </table>
    </td>
    <td width="100%">
      <table width="100%" border="0" cellpadding="0" cellspacing="2">
        <tr>
          <td style="border-bottom: black 2px dotted;"> </td>
        </tr>
        <tr>
          <td style="line-height: 0.3;"> </td>
        </tr>
      </table>
    </td>
    <td width="1%">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="line-height: 0.2;"> </td>
        </tr>
        <tr>
          <td nowrap><p>право право</p></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Всем спасибо за помощь.