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>
Jak správně nakodovat email pro Outlook 2007?
Co se právě děje na Webtrhu?
- Jan Bartoň poptává: Google Workspace specialista
- Petriczeky nabízí: Žádný pomalý Wordpress! Ale rychlé weby na míru
- Tomas-S poptává: Potávám napojení XML feedu od dodavatele SHOPTET
Pokud si nevíš rady s tím, co můžeš/nemůžeš u jednotlivých emailů použít - https://www.campaignmonitor.com/css/
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.
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.