I have a simple Email whose body is in HTML.
This is the simple HTML:
<html>
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ticket_holder {
width:800px;
height:480px;
background-image:url(http://www.domain.com/img/sorteos/billete_sorteo_24-07-2015.jpg);
float:left;
margin:10px auto;
position:relative;
}
.ticket_number {
width:277px;
height:60px;
text-align:center;
position:absolute;
top:290px;
left:450px;
font-size:42px;
color:#11AA00;
font-family: Titillium Web, sans-serif;
font-weight:bold;
}
</style>
</head>
<body>
<div class="ticket_holder">
<div class="ticket_number">0236</div>
</div>
</body>
</html>
Now, I will show the content of the Email gotten from a Gmail account. I think there must be an issue related to header but have no idea what should it is.
Delivered-To: [email protected]
Received: by 10.37.71.193 with SMTP id u184csp169517yba;
Fri, 10 Jul 2015 12:10:37 -0700 (PDT)
X-Received: by 10.129.105.213 with SMTP id e204mr24861296ywc.97.1436555437024;
Fri, 10 Jul 2015 12:10:37 -0700 (PDT)
Return-Path: <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>
Received: from mail136-7.atl41.mandrillapp.com (mail136-7.atl41.mandrillapp.com. [198.2.136.7])
by mx.google.com with ESMTPS id k7si6464663ykd.6.2015.07.10.12.10.36
for <[email protected]>
(version=TLSv1.2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128);
Fri, 10 Jul 2015 12:10:36 -0700 (PDT)
Received-SPF: pass (google.com: domain of bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com designates 198.2.136.7 as permitted sender) client-ip=198.2.136.7;
Authentication-Results: mx.google.com;
spf=pass (google.com: domain of bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com designates 198.2.136.7 as permitted sender) smtp.mail=bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com;
dkim=pass [email protected];
dkim=pass [email protected]
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed/relaxed; s=mandrill; d=mail136-7.atl41.mandrillapp.com;
h=From:Sender:Subject:Reply-To:To:Message-Id:Date:MIME-Version:Content-Type; [email protected];
bh=QTHxKn1Liqi9ZJNIUiIqQFl0DNg=;
b=Wep3W+aIvU17Xwa1SNM0he9Bf403lXYidvKGtwiZpb9QrccWY0DBqImsEqnEGNBKMdSpTd/MdyYW
k2bgPf/yqHdwNXPDsqS3naEEs/gJC7dfIU+2zvGKp2fpGKsKyzhHkWITEMKV5DoMs3WPNKEPxopx
l7GY4JpTaaSm7f+4B3M=
DomainKey-Signature: a=rsa-sha1; c=nofws; q=dns; s=mandrill; d=mail136-7.atl41.mandrillapp.com;
b=JIWGJJlHUZt5grcY4at3yqUabbvCI/KrS/VNplK+n+Ty9cDuCQQEANkExNamBojv+SMXsL8URPnl
igpbzKkhUk1WEvjufNYp6pZxAPkjHljuLpA+XdnYlgjCzvWJ4gI1QRuq3v5OeXxP6fcebsMSJrhn
rKWFKYfrMCpZx8v4NXk=;
Received: from pmta04.mandrill.prod.atl01.rsglab.com (127.0.0.1) by mail136-7.atl41.mandrillapp.com id hk0cao1sb1ko for <[email protected]>; Fri, 10 Jul 2015 19:09:11 +0000 (envelope-from <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=mandrillapp.com;
[email protected]; q=dns/txt; s=mandrill; t=1436555350; h=From :
Sender : Subject : Reply-To : To : Message-Id : Date : MIME-Version :
Content-Type : From : Subject : Date : X-Mandrill-User :
List-Unsubscribe; bh=N1DazcpdS55HBslvogsYDTv2iLdRO0rnUDZkh9PCbtQ=;
b=OjcMKaAC4K4s1I3fpjFwqMGbYcayh7661XLVARyfmap3g1zZMW/+FWtGU2rzKrIF7wNbtC
+4E06pOycBBa7Q/D6BGk8CtLQLtWBe260o9X7d4gvBAl70/t0zyqbkucPx82AKzXe956cwsB
wiBB9xxxmgQdq/LJsmax3b1/+ZRWk=
From: "Contacto impresoras3d.com" <[email protected]>
Sender: "Contacto impresoras3d.com" <[email protected]>
Subject: =?utf-8?Q?Combinaci=C3=B3n=20Sorteo=2024/07/2015?=
Return-Path: <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>
Received: from [188.165.162.97] by mandrillapp.com id 94c0ce7842b842caaa20ee481b5d5bda; Fri, 10 Jul 2015 19:09:10 +0000
Reply-To: <[email protected]>
To: <[email protected]>
X-Report-Abuse: Please forward a copy of this message, including all headers, to [email protected]
X-Report-Abuse: You can also report abuse here: http://mandrillapp.com/contact/abuse?id=30672132.94c0ce7842b842caaa20ee481b5d5bda
X-Mandrill-User: md_30672132
Message-Id: <30672132.20150710190910.55a01856de9973.48448148@mail136-7.atl41.mandrillapp.com>
Date: Fri, 10 Jul 2015 19:09:10 +0000
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="_av-M8imh9jmVCY5HVEL4ea0TA"
--_av-M8imh9jmVCY5HVEL4ea0TA
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
0236
--_av-M8imh9jmVCY5HVEL4ea0TA
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
<html>
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ticket_holder {
width:800px;
height:480px;
background-image:url(http://www.impresoras3d.com/img/sorteos/billete_sorteo_24-07-2015.jpg);
float:left;
margin:10px auto;
position:relative;
}
.ticket_number {
width:277px;
height:60px;
text-align:center;
position:absolute;
top:290px;
left:450px;
font-size:42px;
color:#11AA00;
font-family: Titillium Web, sans-serif;
font-weight:bold;
}
</style>
</head>
<body>
<div class="ticket_holder">
<div class="ticket_number">0236</div>
</div>
<img src="http://mandrillapp.com/track/open.php?u=30672132&id=94c0ce7842b842caaa20ee481b5d5bda" height="1" width="1"></body>
</html>
--_av-M8imh9jmVCY5HVEL4ea0TA--
Gmail strips the head tag and many email clients give limited support on styling of div tags. Your best bet is to convert the div to tables and inline the styles. See here for CSS compatability and here for an inliner.