Im very new to html concepts, i've tried to read others articles/posts but i still don't understand something.
I have to format a template mail in a rails app. The template was gived by my boss.
I am currently converting html.erb into html.haml so the syntax will be haml.
Since i'm not a front dev someting is disturbing me.
The templates have many lines like this
<td class="headerContent" style="border-collapse: collapse;color: #202020;font-family: Arial;font-size: 34px;font-weight: bold;line-height: 100%;padding: 0;text-align: center;vertical-align: middle;">
and in the css above something like this
.headerContent {
color: #202020;
font-family: Arial;
font-size: 34px;
font-weight: bold;
line-height: 100%;
padding: 0;
text-align: center;
vertical-align: middle;
}
Why is there style definition inside the <td ...> definition since the .headerContent class is already declared in css block ?
I also have keyword !important declared in many places, i read articles about style overriding , it is still obscure for me.
Why all style definition are all not just in one css block/file ? Mixing html and css is kind of disturbing
It looks like your email template got inlined by something like premailer. This is a "good thing"™, as some email clients don't support <style> tags in the <head> element. It's ugly and gross, but ultimately a necessary evil if you want to support gmail users.
Related
My Sphinx project generates HTML for a document that uses code font inline. The text font I'm using is Lato; the code font is Consolas.
The problem is that wherever the document shifts from the text font to inline code, Sphinx inserts extra space. Here's a snapshot of how the text should look (simulated in another application) and how it actually looks:
The problem is particularly obvious with code at the beginning of a line. The extra space makes that line appear to be indented:
It looks like Sphinx is generating HTML that composes the preceding and following words in code font, but it's not:
Another composing tool I use does not do this, although it generates similar HTML:
I assume that the project's style sheet is giving the Consolas font some property that adds space before and after a font shift, but I can't find it in the style sheet or the browser's HTML inspector. Actually, I can't find a property in HTML that could do that. What should I look for?
Later -- this is a response to Steve Piercy's comment. I'm editing the original message because I can't insert graphics in a comment.
Steve asked me to attach a reproducible sample. I'm afraid that will be difficult because some parts of the project (the theme, i.e. the infrastructure, not just the content) are proprietary. I should be able to separate the style sheets from the theme and use them to demonstrate the problem in a "clean" theme, but to do that I'll need to learn more about themes. It's likely to take a while just to find time for that.
As an alternate approach, I'm attaching snapshots of the output, the HTML, and the entire set of applicable styles from the browser's HTML inspector. All of the relevant information should be there.
The display:
The HTML that generated it:
The styles (1 of 5)
(2 of 5)
(3 of 5)
(4 of 5)
(5 of 5)
Response to Steve Piercy, 11/29:
I followed Steve's 11/29 suggestion and saw the following.
For a piece of inline code:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
font-size: 13.9333px;
font-weight: 500;
line-height: 17.6px;
text-align: left;
white-space: nowrap;
For the enclosing body type:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14.6667px;
font-weight: 400;
line-height: 17.6px;
margin-bottom: 5.86667px;
margin-left: 0px;
margin-right: 5px;
margin-top: 10.2667px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
white-space: normal;
The only possibly relevant properties I see are box-sizing in the inline code, and margin-right in the body type. I tried changing both (to content-box and 0 respectively), but that had no effect.
December 5: Steve Piercy wrote, "You're getting closer. I see 4 margin-* attributes that you can inspect and override."
With respect, I don't see anything of the sort. I selected a piece of inline code and scrolled up and down the attribute stack several times, and when I couldn't find the margin attributes I copied and pasted the whole thing into a text editor and searched for "margin". There were no instances.
Here is the entire contents of the code inspector's right hand column (still with a piece of inline code selected):
Just a note to let you know that I found the problem. The <span> tag that wraps inline code does not have padding, but another tag -- two levels further up -- did! I changed that tag from "padding: 2px 5px;" to "padding: 2px 0;" and the problem resolved.
Thanks to everyone for your efforts to help. You really did help; I only found the problem while trying to simplify a complete HTML sample that i could upload without proprietary content.
In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
Hi friends I am getting stuck trying to create an emailer ... I designed an emailer then cut that design into HTML and send that emailer using office 2007 to my gmail... when i checked emailer in my gmail i got this
There are spaces showing after debugging I found there are <p class="MsoNormal"> after every <tr>. To reset this I also applied following style but it doesn't work... please help me guys
CSS
body {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
html {width: 100%;}
body {width:100% !important;}
.ReadMsgBody, .ExternalClass {width:100%; display:block !important;}
table td {border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
#backgroundTable {margin:0; padding:0; width:100% !important;}
p.MsoNormal {margin: 0px}
img{display:block;}
One trick you could try (work in most cases) is adding this style to every td where the image is
<td style="line-height: 25%">
If that doesn't work, try applying it on your <tr> (I honestly don't know how it works, just that it works in some cases)
There is no way to prevent msoNormal tags when sending from Outlook. You can hide the effects in many clients, but as Gmail needs inline CSS (strips the style tag), it is not possible to avoid in Gmail. Here is a related article on the topic
There are ways you can design around it however. You could use one large (uncut) background image and put all of the content in front for example.
How about you put the display: block; per image?
Ex:
<img src="YOUR.IMG.SRC" alt="" style="display: block; margin: 0; padding: 0;" border="0"/>
This worked for me. The hardest part is removing that p.MsoNormal on Outlook, still figuring that out since Outlook's recent versions still has that bug. And also, put ; on every style you type. CSS would be messy if not.
I think i have understand the reason: Its interesting with some Outlook document features interesting with its tags and memory security requirements vault etc..
Simple solution :
p:after {
content: none;
}
I am having a little bit of a hard time getting a CSS rule to work for me. I believe it has to do with the order the rules are applied, but I hope that maybe one of you who is no doubt more experienced with HTML and CSS than myself could help me out.
Basically my goal was to put a colored border around the currently focused text inputs (textboxes and textareas as well as drop downs). The CSS is fairly short (I think...) But the rule that is giving me trouble is at the very bottom (.userinput:focus)
body
{
font-family: Arial;
}
.header
{
color: #004c85;
font-family: Arial;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
padding-bottom: 5px;
}
.titleCell
{
background-color: #004c85;
font-family: Arial;
color: White;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.subtitleCell
{
background-color: #aaaaaa;
font-family: Arial;
color: #092548;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.normalCell
{
background-color: #f1f1f1;
font-family: Arial;
color: #092548;
font-size: 9pt;
font-weight: bold;
text-align: left;
padding: 1px 2px 1px 2px;
}
.errorText
{
font-family: Arial;
color: #d01d00;
font-size: 9pt;
font-weight: bold;
text-align: left;
}
.button
{
font-size: 12px;
color: #f1f1f1;
background-color: #004c85;
}
.userinput:focus
{
border: 2px ridge #00a2ff !important;
}
I created a simple page with a single table and it worked fine (target browser here is IE).
When I create a large page though with multiple tables and divs, this rule doesn't seem to be applied in IE anymore. Upon reading I added the !important to the rule, but it didn't help me out. I downloaded Firebug, but the same page looks fine in Firefox (the border appears).
Any tips at this point would be greatly appreciated.
Edit: I can't post a link to the whole thing unfortunately. Below is the test page that I had success with. I can probably post a link to the larger HTML, but it would have to be downloaded and run locally.
<!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>
<title>CSS Demo Page</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
<table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
<tr>
<td class="header">
Header
</td>
</tr>
<tr>
<td class="errorText">
Error Text
</td>
</tr>
<tr>
<td class="titleCell">
Title Cell
</td>
</tr>
<tr>
<td class="subtitleCell">
Subtitle Cell
</td>
</tr>
<tr>
<td class="normalCell">
Normal Cell
</td>
</tr>
<tr>
<td class="normalCell">
<input type="text" class="userinput" size="25" />
</td>
</tr>
<tr>
<td class="normalCell">
<input type="checkbox" value="ON" />
Checkbox
</td>
</tr>
<tr>
<td>
<input type="button" class="button" value="Button" />
</td>
</tr>
</table>
</form>
</body>
</html>
That is the test page that worked OK. Note I have the css file on a web server, but it is only internally accessible. I thought about doing jquery but I thought this would be easier. Apparently not.
Thanks again. If needed I can still probably post the HTML for the big page later.
Edit Again: I am looking at the markup now. It seems OK on the W3C sites, but maybe I am missing something. If anyone is interested, here is a link to the larger page HTML in a txt file. http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
I should probably also mention the CSS I posted previously is the only one in use. Also, although it doesn't really help much, the CSS works in Chrome as well as Firefox. IE is the lone holdout (big surprise there...)
Thanks again all for the links and comments. I am determined to figure this out.
Without seeing the full markup, my best guess is that you have either invalid markup on the page (ie unclosed tags, invalid characters), which can result in broken styles and page structure, sometimes differing between browsers, or your class declaration is being overridden somewhere else in your stylesheet. The focus selector is valid and jquery won't be necessary.
I can think about two things that can break down the selector:
Another stylesheet/ style tag has the same selector+property and includes !important too, and because of this - you can't see your own css.
The markup on your HTML page is invalid. Take a second and validate it using W3C Validation service.
Like what Ryet and Nadav said, you could have invalid html markup. But invalid html markup is not the only thing that causes problems, so does invalid css. Invalid css can involve missing brackets, absent semicolons, misuse of id's and classes, and so on. You can find invalid css markup using this site http://jigsaw.w3.org/css-validator/
Figured it out. And I feel very silly. Comments broke my page.
I am much more of a C, C++, C# kinda guy. It has been awhile since I have done much straight HTML from scratch. I was trying to create a template we could use going forward to base all of our HTML forms on. At the very top of the page I had a block comment explaining what the template is for (not too uncommon to place a block comment at the top of a code file explaining what it does, right?)
Long story short I took out bits and pieces of my HTML until all that was left was a single table, one row, one column and the text box. When that still didn't work, I thought about taking out the comment. The comment was the first thing on the page, above the
<!DOCTYPE ...
Thanks for your help. If anyone has any tips or links to best practices when using comments in HTML, I would be very thankful.
Thanks again for all your suggestions.
I'm designing an email in Dreamweaver with inline CSS, but every test I make, with Hotmail in Firefox and Chrome always renders header tags as a green font color. I want the font to be normal. Nothing will change it. Why is <h1>-<h6> rendered as a font color?
<div class="blockheader">
<h2>New event starting today!</h2>
</div>
<style>
#block .blockheader {
background-color: #000;
color: #FFF;
font-family: "Arial Black";
display: block;
text-align: left;
padding: 2px 0px 2px 0px;
}
</style>
When writing HTML/CSS for emails, you tend to have to pretend you're going back in time. Meaning, write very basic markup, and use inline styles:
<h1 style="color: #FFF; background: #000">Foo Email</h1>
Additionally, check out the HTML Email Boilerplate. You may also find the Inline Styler to be of help too.
In doing a little research, Hotmail renders h tags green and for no good reason that I see. The fix that I found is using !important in your in-line styles. So like this:
<h4 style="color: #660000 !important;">Awesome Red Header in Hotmail</h4>
Hope this helps.