logo
07.12.2015 11:26
1
Dobrý den,

mám nakodovanou šablonu emailu, která se odesílá jako potvrzení a souhrn objednávky. Všude se mi zobrazuje dobře, až na Outlook (testování konkrétně ve verzi 2007). Níže kopíruji ukázku kódu. Nevíte někdo jak správně styly zapisovat? Googlil jsem, ale vždy jsem našel nefunkční řešení.

Díky!


<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</head>
<body style="background-color: rgb(220, 220, 220);">

<div style="width:670px;background-color:white;margin:0 auto;padding-left:25px;padding-right:25px;padding-bottom:10px;">

<h1 style="font-weight: 600;font-size: 35px;padding-top: 20px;">Děkujeme za Váš nákup na Tapirus.cz</h1>
<p style="font-size: 16px;font-weight: 300;">Tímto e-mailem potvrzujeme, že jsme v pořádku přijali Vaši objednávku a níže zasíláme upřesňující informace.
<!-- Jakmile bude objednávka vyřízena, dostanete od nás zprávu s dalšími informacemi. --></p>

<hr />

<div style="margin-bottom:30px;margin-top:30px;">
<h2 style="font-size:20px;font-weight:600;">Dodací údaje</h2>
<p style="line-height:16px;"><b>Jméno a příjmení:</b> Jméno</p>
<p style="line-height:16px;"><b>Ulice a čp:</b> Ulice</p>
<p style="line-height:16px;"><b>Město:</b> Město</p>
<p style="line-height:16px;"><b>PSČ:</b> PSČ</p>
<p style="line-height:16px;"><b>Email:</b> Email</p>
<p style="line-height:16px;"><b>Telefon:</b> telefon</p>
<p style="line-height:16px;"><b>Platba:</b> Platba</p>
<p style="line-height:16px;"><b>Doprava:</b> Doprava</p>
</div>

<hr />

<h2 style="font-size:20px;font-weight:600;margin-top:15px;margin-bottom:15px;">Shrnutí objednávky</h2>


<table style="border:none">
<tr>
<td style="font-weight: bold;padding-bottom:7px;width:220px;font-size:16px;font-weight:600;">Objednané produkty</td>
<td style="text-align:center;font-weight:bold;padding-bottom:7px;width:220px;font-size:16px;font-weight:600;">Počet kusů</td>
<td style="font-weight:bold;padding-bottom:7px;text-align:center;width:220px;font-size:16px;font-weight:600;">Cena za kus</td>
<td style="font-weight:bold;padding-bottom:7px;text-align:right;width:220px;font-size:16px;font-weight:600;">Cena celkem</td>
</tr>
</table>
<table style="border-top: 1px solid grey;width: 100%;">
<? foreach ($data["kosik"] as $item):?>
<? $sum+=$item['pricesum_dph']?>
<tr>
<td style="width:220px;font-size:16px;font-weight:300;">Jméno</td>
<td style="text-align:center;width:220px;font-size:16px;font-weight:300;">8 ks</td>
<td style="text-align:center;width:220px;font-size:16px;font-weight:300;">250,- Kč</td>
<td style="text-align:right;width:220px;font-size:16px;font-weight:300;">235,- Kč</td>
</tr>
<?endforeach?>
</table>
<table style="border-top: 1px solid grey;width: 100%;">
<tr>
<td colspan="3" style="width:220px;font-size:16px;font-weight:300;">Mezisoučet:</td>
<td style="text-align:right;width:220px;font-size:16px;font-weight:300;">538,- Kč</td>
</tr>
<tr>
<td colspan="3" style="width:220px;font-size:16px;font-weight:300;">Doprava - Doprava</td>
<td style="text-align: right;width:220px;font-size:16px;font-weight:300;">550,- Kč</td>
</tr>
</table>
<table style="border-top:1px solid grey;width:100%;margin-bottom:15px;">
<tr>
<td colspan="4" style="font-size:19px;font-weight:bold;width:220px;font-size:16px;font-weight:600;padding-top:7px;">Celkem:</td>
<td style="text-align:right;font-size:19px;font-weight:bold;width:220px;font-size:16px;font-weight:600;padding-top:7px;">550,- Kč</td>
</tr>
</table>

<h4 style="font-size:20px;font-weight:300;">Krásný den Vám přeje <b>Obchod.cz</b></h4>

</div>
</body>
</html>

Co se právě děje na Webtrhu?

07.12.2015 12:03
2
Pokud si nevíš rady s tím, co můžeš/nemůžeš u jednotlivých emailů použít - https://www.campaignmonitor.com/css/
07.12.2015 12:17
3
Spíš než kód dej buď odkaz na živou ukázku nebo uveď co se ti konkrétně zobrazuje špatně. Používáš elementy, kterým je lepší se vyhnout (divy, nadpisy, paragrafy), jelikož je každý klient velmi rád styluje po svém.
07.12.2015 13:24
4
Název:  ScreenHunter_1.jpg
Zobrazení: 87
Velikost:  54,2 KBNázev:  tapirus-mail.jpg
Zobrazení: 83
Velikost:  503,0 KB

Srovnání jak se zobrazuje v Thunderbird a jak v Outlook.
07.12.2015 22:14
5
Je to přesně jak jsem psal, zlobí tam ten div a nadpisy. Navíc u kódování e-mailů musíš u každého elementu vše (znovu) deklarovat, abys měl jistotu, že se to bude chovat aspoň částečně předvídatelně. To nedodržuješ.

Sosni si šablonu zdarma a uprav si ji. Ušetříš čas, mnoho času.