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

HTML a CSS HTML a CSS Pevná výška řádku tabulky v emailu American English version English version

Aktivity (1)
Avatar
pat251
Člen
Avatar
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
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Patrik Smělý (SogoCZE):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
PHP můj oblíbený jazyk......
Avatar
Ori
Člen
Avatar
Odpovídá na pat251
Ori:28.9.2014 12:42

ak nepomôže

max-height: 300px;

tak vyskúšaj

max-height: 300px!important;
 
Nahoru Odpovědět  +1 28.9.2014 12:42
Avatar
pat251
Člen
Avatar
Odpovídá na pat251
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  -2 28.9.2014 13:02
Avatar
IT Man
Redaktor
Avatar
Odpovídá na pat251
IT Man: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
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
pat251
Člen
Avatar
Odpovídá na IT Man
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
Avatar
Honza Bittner
Redaktor
Avatar
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  +2 28.9.2014 18:33
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
pat251
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
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.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na pat251
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  +1 28.9.2014 19:09
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
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.