I'm just learning to create a responsive email signature. I am not good at coding so would appreciate any advice.
In part of the code shown below, do I need any special attributes to correct or make sure it's responsive?
I am editing in DreamWeaver and in Chrome preview it seems to work. Though, I have two columns and it's flexible only for the column text on the right, but it doesn't move the second column below the first column.
Also, how do I define which height or min-height to set for the table?
Sorry - I am really a newbie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Email Signature</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body style="font-size: 11pt; font-family: Calibri, sans-serif;">
<table style="width: 100%; min-height: 120px; font-size: 11pt; font-family: Calibri, sans-serif;" cellpadding="0px" cellspacing="0">
<tbody>
<tr>
<td width="120" style="font-size: 11pt; font-family: Calibri, sans-serif; border-right: 1px solid; border-right-color: #ba1f31; width: 120px; height: 100%; padding-bottom: 0px; padding-left: 0; padding-right: 10px; vertical-align: top; valign="top" rowspan="6">
I think it's not possible. Not for working on all mailing platforms (Outlook, gmail, apple mail, etc). Each one implements and standar of html, and many times is an old one.
You can use these guide to look for the best and most compatible elements: https://www.campaignmonitor.com/css/style-element/style-in-body/
Related
I'm trying to build an email template based on https://www.muicss.com/docs/v1/example-layouts/html-email.
On top of what they offer, I'd like to have a two solid color background: color A for the top fixed height (say 200px), and color B for the rest of the content, and the table (cards) floating across the two colors, similar to This.
I tried different options using linear-background, but it doesn't show at all, the gradient starts from the bottom of the card, or the card's color becomes transparent when copied to Gmail web client (even after I inlined styles)
This is what I have for now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- NOTE: external links are for testing only -->
<style>
body {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #FFF;
}
.mui-body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #212121;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
font-weight: 400;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.001em;
background-color: #FFF;
}
.mui-container, .mui-container-fixed {
max-width: 600px;
display: block;
margin: 0 auto;
clear: both;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}
.mui-container-fixed {
width: 600px;
}
.mui-panel {
padding: 15px;
border-radius: 0;
background-color: #FFF;
border-top: 1px solid #ededed;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #d4d4d4;
}
</style>
</head>
<body>
<table class="mui-body" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container">
<table cellspacing="0" border="0" width="100%">
<tr>
<td class="mui-panel">
<table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<p>random</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html>
Can someone help me with this please?
If only email clients decided to sit down and strictly follow the RFCs... If only they would use the same html css parsing engine...
The question isn't so much HOW but rather, WHAT type of html and css most email clients support consistently across the board. You will find most clients just do their own thing when it comes to parsing your emails and you could end up writing many templates from scratch for the same email.
To save you some time search Foundation for Emails on Google. See direct Link below.
Foundation for Emails | Responsive Email Templates
Foundation for emails is a framework that helps you develop your own custom email templates from templates they already have. Fluid & Responsive for any device. Very clean.
In the process, you will learn which CSS and HTML tags you can use and which aren't supported. Many aren't supported.. To give you an idea, html layouts in emails are created using <table></table> instead of <div></div>. The DOCTYPE you're using is also not ideal; think early 2000's.
Example of correct doctype for all universal emails you will ever write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Email clients does not support all the css properties. So in short better you use images for linear gradient.
Hello and thank you for taking the time to look inside my post.
I am currently building an HTML email and I inherited some code to work with, my current issue is that there is a section on the email that was built using tags and they are not display correctly on several email services.
What other alternatives do I have for blockquote?? I have added my code below for your reference, I need to keep the same look but make it work. Thanks a lot!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->
<style type="text/css">
#outlook a {
padding:0; /* trigger read in browser link in Outlook */
}
body, #bodyTable {
width:100% !important;
height: 100% !important;
-webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */
-ms-text-size-adjust:100%;
margin:0;
padding:0;
background-color:#eeeeee;
}
/* Outlook fixes */
/* Styles */
img, a img {
display: block; /* Remove extra space */
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode:bicubic; /* image resize fix for IE */
}
#main td, p, #subs td {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 22px;
color: #505050;
}
blockquote {
background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;
background-color:#f8f8f8;
padding: 30px 40px 30px 40px;
margin: 14px 30px;
}
blockquote p {
margin-top: 2px;
margin-bottom:2px;
font-weight:bold;
font-size:14px;
}
/* mobile-specific styles */
</style>
<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">
<tbody>
<tr>
<td>
<tr>
<td style="padding: 10px 15px 20px;">
<blockquote><p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.” </p>
<p style="text-align:right; font-weight:normal;">—Chicago </p></blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</table>
</head>
</html>
I am new to HTML but have been programming for over 50 years. I am trying to place an image in a table. I can see from googling that this is possible. NuHtml chcker keeps keeps rejecting the code. What have I done wrong ?
What I had originally included was a snippet where I was having a problem Thanks for your help & sorry that I may have wasted your time. I had developed it in Word in the mistaken belief that I could just save as HTML & all would be OK. After 50 years with computers, I should have known better. The structure of the page is 2 columns with multiple rows - some rows merging into 1 column.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 25 Apr 2018 14:13:29 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>ND Mailshot_2</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table>
<img src="Reminder-1_files/image001.jpg" height="204" alt="ND Logo" title="ND Logo" style="float: left; width: 30%; margin-right: 1%; margin-left:5%; margin-bottom: 0.5em;"/>
<style>.centered {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: red;
font-family: "Trebuchet MS", Helvetica, sans-serif ;
font-size:150%;
font-weight: bold;
text-shadow: 2px 2px white;
}
</style>
<div class="container">
<a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&feature=youtu.be&t=15s?rel=0&autoplay=1">
<img src="Reminder-1_files/image002.gif" height="206" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a></div>
<p style="clear: both;">
</tr><tr>
<span>
<style>
p {
color: rgb(0,44,132);
text-align: justify;
max-width:40%;
font-size:150%;
font-family: "trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
}
</style>
<p>Hi Kris<br>
Just a quick reminder of some of our metering products. In particular the MultiCube Modular Meter (above right) and the Cube 950 triple 3 Meter (below). If you need any more information just click on the image for more info on the product or follow this link to our website.
Alternatively - or possibly as well - you might try this link. You'll need your sound ON and I hope that you enjoy it.</p>
</span>
<span>
<a href="https://www.ndmeter.co.uk/current-transformers.html">
<img src="Reminder-1_files/image004.jpg" height="206" alt="" title="Mod Meter" style="float: right; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a>
<div class="centered">Remote Display now available</div>
</td>
</span>
</tr>
</table>
</body>
</html>
To be honest, I have no idea what is going on with your HTML but I tried to fix it (which is not perfect yet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<style>
.centered {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: red;
font-family: "Trebuchet MS", Helvetica, sans-serif ;
font-size:150%;
font-weight: bold;
text-shadow: 2px 2px white;
}
p {
color: rgb(0,44,132);
text-align: justify;
max-width:40%;
font-size:150%;
font-family: "trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>
<a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&feature=youtu.be&t=15s?rel=0&autoplay=1">
<img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em">
</a>
</td>
<td>
<p>Hi Kris</p>
</td>
</tr>
</table>
</div>
</body>
</html>
ALWAYS use <!DOCTYPE html>, close your tags (as long as they are closable) and only use inline CSS if you really need to.
Start to learn HTML on https://www.w3schools.com/html/html_intro.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on HTML code. I need the title of code be in center of page. The title of page (heading) contain 10 words.
The options i am using start the sentence from middle and then move to right. I need the whole .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline {
position: absolute;
left: 50%;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<center class="Titleline">You are one step closer to <br/>the experience of a life time</center>
</tr>
</table>
</body>
</html>
You see the sentence start at center but moves to right.
can this be fixed somehow.
Your HTML is invalid. There are two reasons:
<center> tag is deprecated. (Some browsers do support them).
<center> cannot be a direct descendant to <tr>, it should be <td>. Use the class for the td instead.
Better code would be something like:
.Titleline {
/* position: absolute;
left: 50%;
width: 546px;
height: 74px;
*/
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
text-align: center;
}
table {
width: 100%;
}
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
See the updated code in the snippet. Use the class for the <td> instead and make the <table>, full width. Also, don't use position unnecessarily.
There are a number of problems:
<center> is deprecated; don't use it.
You have invalid markup; <center> is not a valid child of <tr>. <td> and <th> are the only valid children of <tr>.
You're using position: absolute with left: 50%, which makes your text start with an offset of 50%; it does not centralise it.
I'd recommend adding switching <center> to <td>, and adding text-align: center to .Titleline in order to centralise it. Keep in mind you've also got a fixed width on your .Titleline, which will need removing. You'll also need to add width: 100% to table so that it takes up the full available width (so that the text can centralise). This can be seen in the following example:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
table {
width: 100%;
}
<body>
<table>
<tr>
<td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
</tr>
</table>
</body>
The above shows how you can centralise your text in a table, but I'd also recommend not using tables for layouts due to their poor support for smaller screens. I'd recommend making use of something like the <div> element to divide up your content instead. For pure text (like your example), you should also make use of the <p> tag:
.Titleline {
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
text-align: center;
}
<body>
<div>
<p class="Titleline">You are one step closer to <br/>the experience of a life time</p>
</div>
</body>
Hope this helps! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.Titleline
{
position: absolute;
text-align:center;
width: 546px;
height: 74px;
font-family: TimesNewRomanPSMT;
font-size: 35px;
line-height: 1.06;
color: #222222;
}
</style>
</head>
<body>
<table>
<tr>
<td class="Titleline">
You are one step closer to <br/>the experience of a life time
</td>
</tr>
</table>
</body>
</html>
I'm currently working on some simple gallery, that should show thumbnails of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it looks correct:
Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html
New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
background-color: #CCFFCC;
background-image:url(../background.gif);
}
table {
border:none;
border-spacing:0;
}
img {
border:none;
}
A:hover {
color: #FF0000;
font-weight: bold
}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
}
.nowrapline3 {
font-size: 10px;
}
.error {
font-weight: bold;
color: #F00;
}
.caption_cell {
background-color: #FFF;
width: 148px;
height: 80px;
}
</style>
</head>
<body>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.
Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.
Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.