Diskuze: Pevná výška řádku tabulky v emailu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

pat251

Člen

pat251:28.9.2014 12:19

Ahoj, jsem začátečník a řeším problém s podpisem v emailových klientech.

Pokud přepošlu existující email na Seznam.cz či Outlook.com, automaticky se roztáhnou (na výšku) všechny řádky podpisu. Podpis mám nastavený přes tabulky, zkoušel jsem zadat pevnou výšku řádků ale nic...

Odpovědět

28.9.2014 12:19

Patrik Smělý

Tvůrce

Patrik Smělý:28.9.2014 12:35

Zkus např

max-height: 300px;

Editováno 28.9.2014 12:35

Nahoru Odpovědět

28.9.2014 12:35

Ori I

Člen

Ori I:28.9.2014 12:42

ak nepomôže

max-height: 300px;

tak vyskúšaj

max-height: 300px!important;

Nahoru Odpovědět

28.9.2014 12:42

pat251

Člen

pat251:28.9.2014 13:02

Bohužel, žádná změna
V současnosti mám kód takto:

<table width="100%" border="0" align="left" style="clear:all">
  <tr>
    <td colspan="3" scope="row">
      <p style="margin-bottom:8px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:10.5pt; color:#000000; text-decoration:none; font-style:italic">S pozdravem
        </span>
      </p></td>
  </tr>
  <tr>
    <td colspan="3" scope="row">
      <p style="margin-top:0px; margin-bottom:5px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:12pt; color:#000000; text-decoration:none; font-style:normal">xx
        </span>
        <br>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#000000; text-decoration:none; font-style:italic;">Marketing
        </span>
      </p></td>
  </tr>
  <tr>
    <td colspan="3" scope="row">
      <img src="xx" width="600" height="2" border="0"></td>
  </tr>
  <tr>
    <td colspan="3" scope="row">
      <img style="margin-top:8px; margin-bottom:0px" src="xx" width="150" height="33" border="0" alt="xx" title="xx"></td>
  </tr>
  <tr>
    <td colspan="3" scope="row">
      <p style="padding-top:4px; padding-bottom:4px; margin:0px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:10.5pt; font-style:italic; color:#000000">xx
        </span>
      </p></td>
  </tr>
  <tr>
    <td width="201" scope="row">
      <p style="padding-top:0px; padding-bottom:0px; margin:0px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; font-weight: bold; color:#000000">Mobile:
        </span>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; color:#000000; text-decoration:none;"> xx
        </span>
        <br>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; font-weight: bold; color:#000000">Office:
        </span>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; color:#000000; text-decoration:none;"> xx
        </span>
      </p></td>
    <td width="217">
      <p style="padding-top:0px; padding-bottom:0px; margin:0px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; font-weight: bold; color:#000000">E-mail:
        </span>
        <a style="color:#000" href="xx">
          <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; color:#000; text-decoration: underline;">xx
          </span></a>
        <br>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; font-weight: bold; color:#000000">    WWW:
        </span>
        <a href="xx">
          <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; color:#b91b1b; text-decoration:underline;">xx
          </span></a>
      </p></td>
    <td width="174">
      <a href="xx">
        <img style src="xx" alt="Facebook" border="0"></a>
      <img src="xx" width="5" height="25" border="0">
      <a href="xx">
        <img src="xx" alt="Google+" border="0"></a>
      <img src="xx" width="5" height="25" border="0">
      <a href="xx">
        <img  src="xx" alt="LinkedIn" border="0"></a>
      <img src="xx" width="5" height="25" border="0">
      <a href="xx">
        <img src="xx" alt="Twitter" border="0"></a></td>
  </tr>
  <tr>
    <td width="568" colspan="3" scope="row">
      <p style="padding-top:0px; padding-bottom:5px; margin:0px">
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; font-weight: bold; color:#000000">Address:
        </span>
        <span style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-decoration:none;"> xx
        </span>
      </p></td>
  </tr>
  <tr>
    <td colspan="3" scope="row">
      <a href="xx">
        <img src="xx" width="600" height="50" border="0" title="xx" alt="xx"></a></td>
  </tr>
</table>
<style>
  <!--
  .moz-txt-sig, .moz-signature { opacity: inherit !important; }
  -->
</style><br clear="all">

Editováno 28.9.2014 13:05

Nahoru Odpovědět

28.9.2014 13:02

Jan Lupčík

Tvůrce

Jan Lupčík:28.9.2014 14:19

Promiň, ale vůbec se v tom nevyznám. Proč všude píšeš pořád dokola span a ty samé styly, místo toho, aby sis udělal nějakou třídu? To samé u obrázků.

Nahoru Odpovědět

28.9.2014 14:19

TruckersMP vývojář

pat251

Člen

pat251:28.9.2014 18:17

Já vím, je to prasárna. Ale pokud jsem to zkusil jakkoliv skupinově nadefinovat, nikdy jsem nedosáhl stejné kompatibility u všech emailových klientů.. Největší problémem je Outlook. Co jiná verze, to jiné chování. Jenom tomhle mi vedlo k tomu, že se jeden podpis zobrazuje ve všech klientech stejně..

Nahoru Odpovědět

28.9.2014 18:17

Honza Bittner

Tvůrce

Honza Bittner:28.9.2014 18:33

Emaily většinou nefungují s externím, nebo v hlavičce, CSSkem a musí se psát inline stylem. To však neznamená, že nemůžeš vyvíjet normálně a pak jen nějakým nástrojem překonvertovat na inline styly.

Třeba http://templates.mailchimp.com/…/inline-css/

V tvém kódu nikde nastavenou výšku elementu, respektive toho řádku nevidím. ??

Mimochodem, můžeš používat aj normální divy - tabulka není pro HTML email, respektive v tvém případě podpis, nutná.

Někdy příští týden bych sepsal nějaký článek jak dělat HTML emaily - není to totiž tak lehké jako dělat normální weby.

Nahoru Odpovědět

28.9.2014 18:33

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

pat251

Člen

pat251:28.9.2014 18:57

Teď momentálně výška řádků nastavená není, nicméně ve variantě kde byla, nefungovala. Co se týče vložení CSS do <body> to mi sice fungovalo, ale také ne vždy na 100%. Nicméně ozkouším link. Díky

Nahoru Odpovědět

28.9.2014 18:57

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:28.9.2014 19:07

Už se těšim přesně to se mi bude hodit

Nahoru Odpovědět

28.9.2014 19:07

Kolik jazyků umíš, tolikrát jsi programátor.

Honza Bittner

Tvůrce

Honza Bittner:28.9.2014 19:09

Nepsal jsem, aby jsi dával CSSko do <body> ale do hlavičky, kde vytvoříš

<style type="text/css">
...
</style>

Pak si vždy zkopíruješ soubor (aby jsi měl jednu verzi bez inline-stylů) a jen projedeš tento kód v tom odkazu a ono ti to udělá inline styly...

Nahoru Odpovědět

28.9.2014 19:09

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.

Nejčastěji vyhledáváné

Diskuze: Pevná výška řádku tabulky v emailu