What is the simplest vertical spacer in Outlook (and supported everywhere else)?
I have two elements, one on top of the other, both with display:block. I would like to space them without wrapping either in a table. I want a spacer that I can reuse anywhere with only simple adjustments to its height. I need to be able to set it to specific pixel heights. I also need to be able to override the height with a media query to make it responsive.
<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>
Part of the goal is to avoid splitting things up into table cells every time we need vertical gaps, since that tends to add other complexities even aside from code bloat (bad for email).
The simplest if it's next to the table edges is to add padding to the <td> element:
<td style="padding:20px 0;">
But within a table cell, the simplest is to use a <p> element with margin:
<p style="margin:20px 0;">
Remember to always specify margin top and bottom on the paragraph because there are defaults. I am assuming you already use a <p> so it's got content after this. (So, don't use <p> </p> like another post says - the height will vary across email clients. And some email clients remove all <style> blocks, such as Gmail IMAP.)
In the case that you do not use a block level element and you want something standalone (that would be odd), you could use a <div> and specify line-height and font-size:
<div style="font-size:30px;line-height:30px;"> </div>
For comparison, if we were to use a <p>, we'd have to write something like this, because <p>'s have a default margin that you have to reset, so is slightly more words than a <div>:
<p style="font-size:30px;line-height:30px;margin:0"> </p>
(Or margin:30px 0 0 0;font-size:0;line-height: 0; which may be arguably 'simpler')
In email development, you'll always want to use tables for cross-client consistence. Reset all base styles and use height/width for spacing.
<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody style="margin: 0;padding: 0;">
<tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
<td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
</tr>
</table>
For a application specific spacer you could use:
<p> </p>
Outlook is quite respectful of common css styling so you could simply use height attribute on any element or class I use the pre tag in this example:
<!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" />
<style>
pre {
height:40px;
}
</style>
</head>
<body>
<h1><%Header%></h1>
<%Body%>
<div>Line 1</div>
<pre> </pre>
<div>Line 2</div>
</body>
</html>
I would avoid using margin and padding as its very sporadic across different email clients.
But the most compatible way I've found to maintain spacing across all email clients is sadly still with tables.
I've found this consistent. I use a div with line-height:50px;. Changing line-height predictably/consistently changes the amount of spacing in MS Outlook 2016 on up and every other newer client. Contrary to #Nathan's answer, I do not see any inconsistencies by omiting font-size. I am using this in production, and we test in Litmus. I will update this answer if I find an issue. Please let me know if you find a problem.
<div style="line-height:50px;"> </div>
I would love to see more/better solutions to this question. My team and I need a goto solution to become the standard.
Related
is there a way to change the TextSize and Textcolor directly in the HTML Document?
It must be this kind of box (same class) because I need the backroundcolor.
Unfortunately it always has the same textsize.
This is the html line:
Welcher Button reagiert schneller?
Picture of HTML element
I know it is probably a very easy solution but I just can't find the solution.
You can not set a font-size via HTML, you can however use CSS inside a HTML document to edit any property like so:
Inside the head > style element (then however it is recommended to use classes [like I did] or ids).
<head>
<style>
.box {
font-size: 32px;
}
</style>
</head>
<body>
<div class="box">
<!-- content -->
</div>
</body>
Or directly inside the specific element's first tag, by adding a style="" attribute.
<div style="font-size: 32px;">
<!-- content -->
</div>
In this example I used a div you can really do this on any element and set the font-size to 32px you can choose any number and even different units.
Simplicius has a good response.
The closest you can get to what you’re asking for (as your question was originally worded) would be something no longer supported in html5
It still works but use at your own risk.
<font size=2 color=red face=Arial>
your text
</font>
I have an email template which works with other email client but, Outlook shows it as distorted (inner div). Here i have specified width of my inner div 920px but in not take effect in outlook. I have either tried this solution but not works
This is my html email template
<html>
<body>
<div style="width:950;margin:0px auto;">
<img style="width:100%;" src="cid:header">
<div style="background-color: #f3f3f3;width: 920px;padding: 15px 15px 20px 15px;margin: 0px;font-family: arial,sans-serif;font-size: 12.8px;box-sizing: border-box;color:#000;white-space:pre-line;" >
Dear xyz
<br><br>
My mail body
<!-- Body might contain table -->
<br><br>
support<br>
</div>
</div>
</body>
</html>
I have refer previous question and emailology but no solution found for div.
Please help me.
You should not use standard front-end development solutions for emails. It's unfortunate, but using table-based layouts is still the best way to handle it. Also, as a general rule of thumb, email widths should fall between 600-800px at the max.
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
What is the best way to place/layout the google+1 and facebook Like buttons so they align neatly?
Currently, the first "thing" in my body is this heading, appearing on top of all pages (slightly modified after logging in): (linebreaks added for readability) :
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<g:plusone size="small" href="https://www.apebroker.com/">
</g:plusone>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</td>
<td align="left"></td><td align="right">It's more fun after you
login
</td>
</tr>
</table>
My problem is that this looks like crap. I know that pages don't need to look exactly the same in every browser, but acceptable ugliness has its limits.
The google button is nicely "vertically centered", while the facebook stuff kind of sticks to the top of the page, 0px down.
See this example:
I tried adding padding:2px; to the style in the facebook iframe, and sure, it came down a bit, but so did the google button too, and the entire heading grew, pushing down the <hr> below.
I obviously don't know much about iframes, but I've managed fine on my own until now.
In my global style sheet I have (amongst other things) this:
body {
margin:0px;
padding:0px;
background-color:#e0e0b0;
color:#302010;
font-family:"Trebuchet MS",Helvetica,Sans-serif;
font-size:100%;
}
And I don't want to change that, as it cascades to all sorts of things that I'm reluctant to break. If you want to check out the complete style sheet and HTML source, an example page can be found here.
Thank you in advance for any hints/suggestions!
How about plus one button, and it's width?
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>
A problem is that the table cells are sizing themself based on the font size even though there isn't any text in the table.
The "correct" answer is not to use tables for layout.
However, if you explicitly set:
<td align="left" style="font-size: 1px">
then your life will get slightly better as you'll be able to explicitly control the height of each of the cells and position things. At the moment despite you "asking" for a height of 21px, you're getting 26px.
After that the FB button will look nice and you'll need to move the +1 button around.
But, the real answer is not to use tables:
http://www.w3.org/2002/03/csslayout-howto
http://www.hotdesign.com/seybold/
and various others...
I've found a fix for this using to encapsulate both fb:like and g:plus separately, and then setting the style of both to style="vertical-align: top;". See example at http://www.clonearmycustoms.com/
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.