Mail design working in mailchimp template, but not in mail clients - html

I have created a template in mailchimp programming myself the html with their respective styles. Everything works fine in the mailchip template viewer. But the moment to see the result in mail clients, some styles are ignored. In the template I am using an image as a background and some text and div elements superimposed on it, using absolute positions. In mail clients, these positions are ignored and the content is displayed as a single column. Does anyone have any solution to this?
Thanks in advance.
I attach the implemented code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxxxxxxxxxxxxxxxxxxxx</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body>
<div>
<div id="coverImg" style="background-color:black;opacity:.15;width:650px;height:890px;position:absolute;z-index:1;"></div>
<img id="fondoImg" style="position:absolute;z-index:0;width:650px;" src="imageURL1" alt="fa94319f-53fe-4c6a-b34b-8660dfb1ba28.jpg">
<h1 id="tituloTxt" style="position:absolute;z-index:2;font-size:40px;top:27px;left:275px;">
<strong>XXXXXXXXXXXX</strong> <br> XXXXXXXXXX</h1>
<div id="containerText">
<p>XXXXXX: *|NOMBRE|*</p>
<p>XXXXX *|VALORADEUD|*.</p>
<p style="text-align:center;">XXXXXXXXX</p>
<center>
<a href="randomURL</a>
<br>
<br>
<div style="margin-top:50px;">
<h3 class="lista" style="display:inline;">XXXXXX: </h3> <h3 style="display:inline;">
*|CEDULA_RUC|*
</h3>
</div>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;"> *|NOMBRE|*
</h3>
</div>
<br>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;">*|VALORADEUD|*</h3>
</div>
</center>
</div>
<p id="txt1">xxxxxxxxxx,</p>
<p id="txt2">xxxxxxxxxx <br> xxxxxxxxxxxx</p>
</div>
<style type="text/css">
body{
font-family:'PT Sans Narrow',sans-serif;
}
#fondoImg{
position:absolute;
z-index:0;
width:650px;
}
#coverImg{
background-color:black;
opacity:.15;
width:650px;
height:890px;
position:absolute;
z-index:1;
}
#tituloTxt{
position:absolute;
z-index:2;
font-size:40px;
top:27px;
left:275px;
}
#containerText{
position:absolute;
z-index:1;
top:200px;
left:45px;
height:470px;
width:530px;
background-color:white;
padding-left:20px;
padding-right:20px;
text-align:justify;
}
#txt1{
position:absolute;
z-index:1;
color:white;
left:270px;
top:680px;
}
#txt2{
position:absolute;
z-index:1;
color:white;
left:185px;
top:710px;
text-align:center;
font-weight:bold;
}
.lista{
color:red;
}
</style>
</body>
</html>

Related

Question regarding CSS in Outlook mail temp

I am working on a mail template for an inventory confirmation email and the mail I have to do contains something that I am struggling to find resources on so any resource about it if you know is helpful.
I am trying to make a responsive mail template that also looks good on outlook/microsoft mail and making circle for item colour presents the most trouble to me.
Here’s an example on how to do this with HTML, CSS, and a dedicated VML fallback for The Outlooks on Windows.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question regarding CSS in Outlook mail temp</title>
<!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</head>
<body>
<!--[if !mso]><!-->
<div style="width:24px;" role="img" aria-label="Pink color">
<div style="border:4px solid #000; border-radius:50%;">
<div style="padding:2px;">
<div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
</div>
</div>
</div>
<!--<![endif]-->
<!--[if mso]>
<v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
<v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
<v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
<v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
</v:group>
<![endif]-->
</body>
</html>
Here are test results of rendering on Email on Acid.
You can use the <style> tag in email to create something like this. Inline styles are also supported.
.circle{
height: 16px;
width: 16px;
border-radius: 50%;
outline: 2px solid;
outline-offset: 2px;
background-color: #f589d9;
}
<div class="circle"></div>

Responsive background image roll over

I'm trying to have a roll over image effect but also make it responsive to small media types, hard to explain but here is a link to video to what Im trying to do... https://www.youtube.com/watch?v=PWoOpJtkyjI&t=118s
any help will be great
jsfiddle
https://jsfiddle.net/0b5sz9zo/
Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<nav>
HOME
ABOUT
WRITINGS
EXTRA
CONTACT
</nav>
<div class="sect sectOne"></div>
<div class="subSection1">subSection1 test </div>
<div class="sect sectTwo"></div>
<div class="subSection2">subSection2 test </div>
<div class="sect sectThree"></div>
</body>
</html>
*{margin:0;}
html, body {height:100%;}
h1,h2,h3,h4,h5,h6, p
{margin-bottom:20px;}
nav{
position:fixed;
width:100%;
height:50px;
background-color:rgba(0,0,0,.5);
z-index:99;
text-align:center;
}
nav a{
text-decoration:none;
color:white;
margin-left:30px;
line-height:50px;
}
.sect{
height:100%;
background-size:cover;
background-attachment:fixed;
}
.subSection1{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.subSection2{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.sectOne{
background-image: url("img/bk1.jpg");
}
.sectTwo{
background-image: url("img/image2.jpg");
}
.sectThree{
background-image: url("img/image3.jpg");
}

HTML Image Sits On Top Of Other Controls

I want to have my background image span the entire page. This works as it should, with the exception of it sits on top of any other control/element I may add to the page. What do I alter in order for me to be able to have an image as a background spanning the entire page as well as add text/images on top of it? This is my current syntax:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
I used demo images for test it. Here is working code:
Just add z-index: -1; to #bg.
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
#content {position:relative; z-index:10;}
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">
Instead of putting the image as a element, have you tried setting the background-image property of the div? That should provide the effect you're looking for. Add the following rule to the CSS File.
#bg {
background-image: url("C:\KittyKat.jpg");
width:100vw;
height:100vh;
}
I would use z-index. It allows you to change the order of elements. So an element with z-index: 1; would appear in front of an element with z-index: 0;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#backgroundImage{z-index: -1;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
Make the image as background of the div using css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {
position:fixed;
width:100vw;
height:100vh;
background: url('C:\KittyKat.jpg');
background-size: cover;
}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"></div>
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

HTML beginner, about image size

I want to create a simple div header to start my website and i have two pics logo.png and grey.jpg as background to my div. My logo wants to have the same height as the header, but to be left and to have something like 10% of the width.
The problem is that is that the logo doesnt seem to stay in size.It exceeds the height of the header if i put body size in auto.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>
I want the logo to be the same height as the div , head.
Just remove the width:15% from <img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">.
I've created a JSFiddle for you :)
HTML:
<div class="flex">
<div>
<img src="images/logo.png" alt="Smiley face" style="width:50px;height:100px;">
</div>
<div class="middle">
<h1> Giorgos Angelousis life story </h1>
</div>
<div>
<div>
AM:2969
</div>
<div>
Exercise-1a
</div>
</div>
</div>
CSS:
.flex{
display: flex;
align-items: center;
}
.middle{
padding-left:10px;
padding-right:10px;
}
Just remove height:100% from your <img> tag. So it will automatically get the height of header div. Here's sample snippet.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="test-img.jpg" alt="Smiley face" style="float:left;width:15%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>

CSS issue in IE7

I have simple web page and that banner contains three images. I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
.middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
#right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; }
</style>
</head>
<body style="margin:0px; padding:0px;">
<form id="form1" runat="server">
<div id="container" class="middle" style="float:left;">
<div id="left"></div>
<div id="middle" class="middle"></div>
<div id="right"></div>
<div id="content" style="clear:both; float:left;"></div>
</div>
</form>
</body>
</html>
any idea?
thanks in advance!
Try to set width value in .middle in percents.
Using your example and assuming you want any content under the banner this is one way you can do it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner{
background:url('image/banner_middle.jpg') ;
background-repeat:repeat-x;
}
#left{
width:338px;
height:103px;
float:left;
background-image:url('image/banner_left.jpg');
background-repeat:no-repeat;
}
#right{
width:620px;
height:103px;
float:right;
background-image:url('image/banner_right.jpg');
background-repeat:no-repeat;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="left"></div>
<div id="right"></div>
<div class="clearFloat"></div>
</div>
<div id="content">
Any content goes here
</div>
</form>
</body>
</html>