Let’s gather our knowledge

HTML5 reset css

HTML5 reset css by html5doctor :)

Minified Version

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

Normal Version

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

source from:

html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
Richard Clark (http://richclarkdesign.com)
http://cssreset.com

Are you forgetting css2/css3 properties? Puzzle to remember all properties?

Be cool! Don’t be puzzle! No need remember all properties, just reminder your mind that you have file where you may get all css properties. SURPRISED! Yes, you would be surprised. Just, download flowing files and get all css2/css3 properties in one frame.

css3-cheat-sheet

css2_cheat_sheet

css2_cheat_sheet

Don’t pressure yourself ;)  have a great day! :)

box-sizing

Are you worried about css box model? puzzle to calculate height, width with border, padding? Let’s think it new way with less complicity. Yes, the element of CSS3 “box-sizing” has broken one of the most complex design patterns of CSS2 and earlier versions. Let’s see how it is actually, how it works, how many browsers support it, etc.

Definition and Usage:

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box or just the content-box which is the default value of the width and height properties.

How it different from Box Model

The “box model” in CSS works like this:

width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box

It’s a little weird, but you get used to it. In IE 6 and earlier, when in “quirks mode,” the box model was treated differently.

width = actual visible/rendered width of box
height = actual visible/rendered height of box

The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. Here is a dramatic example of the difference:

box-sizing

css box model css2 vs css3

CSS Syntax

box-sizing: content-box|border-box|initial|inherit;

Property Values

Value Description
content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

 

Browser Support

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

 

Thank you for reading… have a great day!

Source:

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://css-tricks.com/box-sizing/
http://www.clickcss.com/box-sizing.html

1. Outlook ignores margin and padding on images.

Outlook 2007-13 do not support the margin or padding CSS properties when placed within an image.

Try using hspace and/or vspace:

<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />

Or add the additional spacing to the image itself (in pixels).

2. Text doesn’t wrap automatically in Outlook.

If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:

<td style="word-break:break-all;">

3. Outlook adds a 1px border to tablecells.

If you are using a background color in your table cell, you’ll see a 1px white border around the contents of the TD. To fix, simply add the following to your embedded styles:

table td { border-collapse: collapse; }	
Or you can add it inline:
<td style="border-collapse: collapse;">... </td>  

4. Outlook sometimes ignores link styling.

Outlook 2007 and 2010 do NOT support inline styes IF the “a” tag does NOT include an “href” attribute.

For example:

<a style="font-size: 20px; color: #004990;">Shop Flooring </a>
Should be changed to:
<a href="http://www.test.com" style="font-size: 20px; color: #004990;">Shop Flooring </a> 

5. If spacing is important, avoid using lists.

The safest way to get consistent results is to use a table instead:

<table cellpadding="2" cellspacing="2" border="0"> 
    <tr>
        <td valign="top">•</td>
        <td>Test</td>
    </tr>
    <tr>
        <td valign="top">1.</td>
        <td>Test</td>
    </tr>
</table> 

6. Use cellpadding and cellspacing with tables.

Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

If you are using an align attribute on your table, for example:

<table align="left"> 

7. Outlook sometimes removes padding.

Outlook 07 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a box element to an inline element.

For example this:

<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</h2>
Will get converted to:
<p class=MsoNormal style='mso-outline-level:3'>
   <b>
     <span style='font-size:11.5pt'>NEW FASHIONS<o:p></o:p></span>
   </b>
</p> 

8. Use MSO to control line height.

Try adding “mso-line-height-rule:exactly” just before your line-height declaration.

For example:

<td style="mso-line-height-rule:exactly; line-height:50px;">
This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.

9. Outlook interprets tables literally.

Be sure your rowspan attributes within your TDs are set to the correct value. Most web browsers are very lenient if you have a higher value than required but Outlook 07 and 2010 will interpret them even if the additional rows do not exist in your table.

10. Outlook sometimes ignores the width and height of HTML elements.

Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.

11. Outlook sets TDs at a minimum of 2 pixels high.

Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.

12. Image backgrounds in Outlook require VML.

In some versions of Outlook (07/10/13) image backgrounds won’t work without using Vector Markup Language (VML). VML is a deprecated, XML-based file format for two-dimensional vector graphics which is part of the Office Open XML standards. This is a complicated problem to fix, so check out this blog about how to use VML to create functional image backgrounds.

You can also try Stig’s Bulletproof Email Background Images tool (http://emailbg.net/) which does a lot of the work for you.

13. Outlook converts some divs to paragraphs.

Outlook often converts your DIVS to paragraphs. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.

14. Outlook uses the Word rendering engine.

Within its viewer, Outlook 2007 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.

From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.

15. Tall images will be cropped in Outlook.

Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.

We’ve also seen Outlook re-scale an image so that it’s max height is 1728px.

We suggest that you crop your images and stack them on top of each other.

16. Images with dimensions defined in HTML may render incorrectly.

Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.

17. Animated GIFs aren’t supported by Outlook.

Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.

 

Copyright from: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13

I’m having a strange issue with Yahoo, where my email is not centered and goes way to the left.

yahoo-mail-template-not-center-position

 

 

 

 

 

 

Where other Mail services is doing good with centered position as my expectation.

However, Finally I have worked out a neat little fix to ensure the email is centered okay. To set up that, I add the following style to the main “table 100% width & height, align – center, table-layout: fixed”  that able wraps around my content:

<table height="100%" width="100%" cellpadding="0" cellspacing="0" 
border="0" align="center" style="table-layout:fixed;">


yahoo-mail-template-center-position

 

 

 

 

 

 

 

Thanks! for reading. Good Day :)

There are a few ways to remove that space, thous are as following:

Solution 1: No Space Between Elements

The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Of course this is a mess to maintain but it's practical, logical, and most importantly...reliable.

Solution 2:  font-size: 0 on Parent

The best white-space solution is to set a font-size of 0 on the parent to the inline block elements.  So if you had a <UL> with inline-block <LI>’s, you’d do this:

.inline-block-list { /* ul or ol with this class */
	font-size: 0;
}

.inline-block-list li {
	font-size: 14px; /* put the font-size back */
}

To counteract the parent font-size setting, you must set a font-size for the list items, but that’s usually fairly simple.   The only time it wouldn’t be simple is if you’re in a wicked cascade of relative units you can’t easily calculate.  In most cases, however, this will be exactly what you need. Update: unless you care to support Android WebKit.

Solution 3:  HTML Comments

This solution is a bit gangsta but also works.  Using HTML comments as spacers between the elements works just as placing no space between elements would:

<ul>
   <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

In a word…gross.  In two words…really gross.  In three words…well, you get it.  But it works!

Solution 4:  Negative Margin

Much like solution two, this is regrettable.  You can take advantage of inline-block’s flexibility to use a negative margin to negate the space:

.inline-block-list li {
	margin-left: -4px;
}

This is the worst solution because you have to account for variable, sometimes unpredictable spacing.  Avoid at all costs.

Solution 5:  Dropping Closing Angle

Another HTML-based hack solution is to simply place the closing > next to the start of the next tag:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Not as ugly as the HTML comment hack but I know I’d probably remove that whitespace and not think about why it was there originally.

good day :)

Source: http://davidwalsh.name/remove-whitespace-inline-block

Instead of using the IE-based HTML rendering engine, Outlook 2007/2010 use the MS Word HTML rendering engine.

Following things won’t work in Outlook 2007/2010:

  1. No background images in DIV tags and TABLE cells.
  2. No nested background colors. A background color in a DIV or TABLE cell displays fine. However, if you nest another TABLE or DIV within the element, the background color vanishes.
  3. No FLOAT or POSITION attribute in DIV tags. In other words, CSS-based layouts won’t work in Outlook 2007. (As far as possible, avoid DIV tags in your html; use TABLE instead)
  4. No animated .gif files or Flash content. Animated .gif files just won’t animate. With Flash, you’ll just get a big red X.
  5. Text alignment will be justified to the left
  6. Text will have double spacing
  7. Forms will not work in the emails sent to Outlook 2007 and Outlook 2010
    Email clients consider email forms to be a security risk. While some email clients simply warn you of potential danger, others like Outlook 2007 outright disable the forms. Given the sporadic support for forms in emails, we recommend linking to a form on a website rather than embedding it in the email.

    Copy right from (http://www.benchmarkemail.com/help-FAQ/answer/what-are-common-issue-with-outlook-2007) :)

Follow

Get every new post delivered to your Inbox.