I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>
Related
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
How do i insert a line break in a single paragraph, without a <br> tag ? see below:
You can just press enter inside of a <pre>tag</pre> using HTML.
In CSS you can use white-space:pre or white-space:pre-wrap
In programming you use a newline \n
JS Bin Example: http://jsbin.com/simeri/edit?html,output
<p style='white-space:pre-wrap;text-align:center;font:bold 130% sans-serif'>
Google Fonts. Hundreds of free, open-source fonts optimized for the web...
Search or browse hundreds of font families, then add the ones you like to your ..
</p>
you can use css word-wrap property like below:
width: 200px; /*width of area after you want line break*/
word-wrap: break-word; /*break down the paragraph/text*/
or use \n dynamically into your code.
<!DOCTYPE html><html><body>
<p style=' white-space: pre-line;text-align:center;font:bold 100% sans-serif'>
Google Fonts. Hundreds of free, open-source fonts optimized for the web...
Search or browse hundreds of font families, then add the ones you like to your ..
</p>
</body></html>
Can you use  ..?
<p> </p>
This is what works within Canvas LMS...
I have a page on my site where I'm displaying HTML email.
Some of that email seems to come with CSS that overrides my site layouts such that certain things get misplaced...
e.g. I have a toolbar at the top of the page that on some mails covers the various header information from the email.
Is there a way of creating a div where I can put the html email with a layout that effectively says 'Stay in this div and don't bugger about with anything else'?
Worth noting that I have the html content as 'text' rather than referring to an external website. (It's actually a return from an API, but assuming the same restrictions apply)
%iframe{srccode: #mail.html}
Just gives me a blank iframe
Include your mail using an IFrame similar to this:
<iframe src="http://www.w3schools.com"></iframe>
This will keep the styles separate
see http://www.w3schools.com/tags/tag_iframe.asp for options to customize the IFrame
If using html as text (rather than referencing an existing page:
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
You may be able to incorporate the scoped style:
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>
worth noting: this feature is still experimental and is not widely supported by 2015 browsers, currently, only FireFox v21.0+ supporting this feature. (more info # w3school.com)
Reference: https://css-tricks.com/saving-the-day-with-scoped-css/
Dave's answer above
<iframe src="http://www.w3schools.com"></iframe>
is good for referencing an external site, or a page that exists as html.
If using html as text (rather than referencing an existing page):
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
And then formatting the iframe to suit does the trick.
I am putting a link in email templates and I donot want to underline the link. In Outlook it is working fine but NOT working in Yahoo and Gmail. Sample code is as followed
<p> My paragraph
<b>
<a style="color: #9B0D25; cursor:pointer; text-decoration: none;" href="abc.com">abc.com</a>
</b>
</p>
I tried text-decoration: none !important; but same result. Can any body help me?
Well ... I was forwarding email from outlook to yahoo. While sending mail from Outlook, it discards the property text-decoration: none;. So when I send email directly to Yahoo, it works !!
Do not use paragraphs in HTML email. Move the style attribute of your anchor tag, to after your href attribute. If this does not solve your problem you have a larger issue than can be seen from the code you've provided.
Adding the important tag will actually be less effective because Outlook will ignore any styling that is followed by !important
If you'd like a template to use, check this one out.
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp