I am creating email template.In Yahoo mobile view, css word-break is getting removed/stripped while rendering. It is removed from inline-css as well as from head section. Any solution for this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.no-wrdbrk{
word-break:keep-all;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="word-break:keep-all;" class="no-wrdbrk">
Several new studies have found that yoga may lower depression and emotional eating, if done on a consistent basis. At the 125th Annual Convention of the American Psychological Association, four separate studies were presented that pointed to similar positive findings about the benefits of yoga.
</td>
</tr>
</table>
</body>
</html>
Try word-break:normal; like below.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.no-wrdbrk{
word-break:normal;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="word-break:normal;" class="no-wrdbrk">
Several new studies have found that yoga may lower depression and emotional eating, if done on a consistent basis. At the 125th Annual Convention of the American Psychological Association, four separate studies were presented that pointed to similar positive findings about the benefits of yoga.
</td>
</tr>
</table>
</body>
</html>
There are
CSS Syntax:
word-break: normal|break-all|keep-all|initial|inherit;
Source
Let me know if this works.
word-break:inherit !important;
worked for me
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥Mayur's Personal Site</title>
<style>
body{
background-color: #eaf6f6;
}
hr{
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<img src="mayurrr.png" alt="mayuresh profile picture">
<h1>Mayuresh Bhosale</h1>
<p><i><strong> Student of Sanjivani College of Engineering, Kopargaon. </strong></i></p>
<p>Hi I am Mayuresh from Aurangabad. I am pursuing my B.tech from Sanjivani College of Engineering, Kopargaon.
<br>I am learning Web Development from udemy.</p>
<hr>
<h3>Education</h3>
<table border="1">
<thead>
<th>Year</th>
<th>School/College</th>
</thead>
<tr>
<td>2007-2017</td>
<td>Maharashtra Public School, Aurangabad</td>
</tr>
<tr>
<td>2017-2019</td>
<td>Sarosh Junior College, Aurangabad</td>
</tr>
<tr>
<td>2019</td>
<td>Sanjivani College of Engineering, Kopargaon</td>
</tr>
</table>
<hr>
<h3>Hobbies</h3>
<ol type="I">
<li>Photography </li>
<li>Playing Games </li>
<li>Listening to Music </li>
</ol>
<p>Contact Me</p>
</body>
</body>
</html>
this is the code!
If I try to add table and in that one row then website gets blank.This same happened when I tried to add background colour to horizontal rule in style tag. Did anyone faced same problem when learning HTML and css?
Now I have added exact same code which is not executing properly.
Your table is inside a ul element, and it's the only child element of that ul. That's invalid HTML. A ul has to contain li elements.
Just erase the ul opening and closing tag.
There are many possible reasons for a code to run blank on a computer. In some cases it might be because you haven't closed <body> or </head> tags properly (or maybe you have duplicates). In other cases however, it might have to do with your computers storage capacity. Check if your storage capacity says something like "0 bytes available" or a very low number. If this is the case you can clean up system files and you should be good.
I've got the following html and css to be used as a template for generating e-mail messages.
But when it comes to receiving the e-mail on my postal programme I have a few pixels of white margins every side.
Is it possible to remove it while using divs or is there another way to avoid these annoying white spaces?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html {
margin: 0!important;
padding: 0!important;
background-color: gray;
}
#nav {
height: 60px;
width: 100%;
background-color: #0078d7;
}
#content {
width: 1160px;
height: 800px;
background-color: #6f6767;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="nav">
{title}
</div>
<div id="content">
{content}
</div>
</body>
Different e-mail clients render HTML e-mails differently. But there are a few basic practices you should adhere to (see references below).
In looking at your code, there's a good chance your problem stems from the use of embedded styles. Here's what MailChimp has to say about that:
Because browser-based email applications, such as Gmail, strip out
<head> and <body> tags by default, always use inline CSS over embedded
CSS.
So, the padding: 0 and margin: 0 in your head section are possibly being ignored or overridden.
Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.
In the world of HTML e-mail, embedded and external styles are bad, inline styles are good, javascript is bad, tables for layout are good. In this world, old-school coding methods are alive and well.
More information:
CSS in HTML Email
Best practices for styling HTML emails
Best Practices & Considerations when writing HTML Emails
Because of the way e-mail clients render HTML - and many of them render the same HTML differently, you're better off building your e-mail with tables. Tables seem to be recognised across all clients.
Also, always use inline styles as internal and external stylesheets can cause problems. This code seems to get rid of whitespace accross most clients:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<div>
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="60">
{nav}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="1160" height="800">
{content}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
I am coding a responsive email template using media queries and I have a specific issue.
I am using MailChimps guidelines and therefore I got into using their CSS Inliner , but I find an issue where the inlined css somehow overrides and breaks my previously working CSS above in the styles.
So for example here is what I am talking about, here is my not inlined 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
This is just for reference, this is not my actual code, but I hope You get the point.
So my problem with this is, after I use the CSS Inliner from MailChimp, I get this:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop" style="display: block;">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi" style="display: none !important;">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
And after I send test emails, in the mail clients, most importantly Gmail, everything is wrong, either both of the objects show or the #mobi one is hidden on mobile and vice versa.The !important statement in my upper css in the style section is due to the fact that the #mobi object will always be visible in Gmail unless it has an !important for the display:none property.
I tried deleting the inlined important statements but nothing worked so far. What is the problem here and how can I bypass it?
According to the rules of CSS Specificity:
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.
You could use !important in your stylesheet to increase the specificity of the relevant styles, forcing them to override the inline styles. However, it should be noted that GMail, among other clients, does not support media queries nor the display property.
I want to send the following page as an html email. It displays fine on the web but in the email the red background doesnt display for the body or the button at the bottom of the page. What am I missing here?
HTML email has been giving me so much trouble!
Thanks for any help i can get!
http://www.americanvineyardmagazine.com/emails/AVvid14email.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>American Vineyard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style type="text/css">
th td tr {
text-align: center;
}
</style>
<body style="padding: 0;background-color:#800000">
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
<th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
<tr>
<td style="text-align:center;">
<a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
<img src="http://americanvineyardmagazine.com/images/video.play.png" alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
</a>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
</td>
</tr>
<tr>
<td style="text-align:center;padding-bottom:35px;">
Watch Now!
</td>
</tr>
</table>
</body>
</html>
The problem is in your table's background path.
You are using a relative path here..
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
It will display correctly on the web because browser will be able to resolve that.
But when you use it in an email, Email client won't be able to resolve that.
Use absolute path here instead.
<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
Use parent class under body tag .wrapper {background-color: #800000;}
I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).
Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.
You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.
I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}