Orite Blog

Jul
08
2009

FREE Instant Email Standard Test Tool

Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the Email CSS support Guide from Campaign Monitor, and utilizing the email-standards.org Email ACID test page as the example. You may paste in your own email template to test in.

Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try Litmus Email Testing or the Campaign Monitor Email Testing tool. If you want to convert any external CSS to inline style, Inline Styler and Emogrifier may come to help. Here goes the FREE tool, post your comments.

Email Client:

Images:

Show Hide

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	/* common
	--------------------------------------------------*/
	
	body {
		margin: 0px;
		padding: 0px;
		color: #fff;
		background: #930;
	}
	#BodyImposter {
		color: #fff;
		background: #930 url("http://www.email-standards.org/acid/img/bgBody.gif") repeat-x;
		background-color: #930;
		font-family: Arial, Helvetica, sans-serif;
		width: 100%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	#BodyImposter dt {
		font-size: 14px;
		line-height: 1.5em;
		font-weight: bold;
	}
	#BodyImposter dd,
	#BodyImposter li,
	#BodyImposter p,
	#WidthHeight span {
		font-size: 12px;
		line-height: 1.5em;
	}
	#BodyImposter dd,
	#BodyImposter dt {
		margin: 0px;
		padding: 0px;
	}
	#BodyImposter dl,
	#BodyImposter ol,
	#BodyImposter p,
	#BodyImposter ul {
		margin: 0px 0px 4px 0px;
		padding: 10px;
		color: #fff;
		background: #ad5c33;
	}
	#BodyImposter small {
		font-size: 11px;
		font-style: italic;
	}
	#BodyImposter ol li {
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}
	#BodyImposter ul#BulletBg li {
		background: url("http://www.email-standards.org/acid/img/bullet.gif") no-repeat 0em 0.2em;
		padding: 0px 0px 0px 20px;
		margin: 0px;
		list-style: none;
	}
	#BodyImposter ul#BulletListStyle li {
		margin: 0px 0px 0px 22px;
		padding: 0px;
		list-style: url("http://www.email-standards.org/acid/img/bullet.gif");
	}
	
	/* links
	--------------------------------------------------*/
	
	#BodyImposter a {
		text-decoration: underline;
	}
	#BodyImposter a:link,
	#BodyImposter a:visited {
		color: #dfb8a4;
		background: #ad5c33;
	}
	#ButtonBorders a:link,
	#ButtonBorders a:visited {
		color: #fff;
		background: #892e00;
	}
	#BodyImposter a:hover {
		text-decoration: none;
	}
	#BodyImposter a:active {
		color: #000;
		background: #ad5c33;
		text-decoration: none;
	}
	
	/* heads
	--------------------------------------------------*/
	
	#BodyImposter h1,
	#BodyImposter h2,
	#BodyImposter h3 {
		color: #fff;
		background: #ad5c33;
		font-weight: bold;
		line-height: 1em;
		margin: 0px 0px 4px 0px;
		padding: 10px;
	}
	#BodyImposter h1 {
		font-size: 34px;
	}
	#BodyImposter h2 {
		font-size: 22px;
	}
	#BodyImposter h3 {
		font-size: 16px;
	}
	#BodyImposter h1:hover,
	#BodyImposter h2:hover,
	#BodyImposter h3:hover,
	#BodyImposter dl:hover,
	#BodyImposter ol:hover,
	#BodyImposter p:hover,
	#BodyImposter ul:hover {
		color: #fff;
		background: #892e00;
	}
	
	/* boxes
	--------------------------------------------------*/
	
	#Box {
		width: 470px;
		margin: 0px auto;
		padding: 40px 20px;
		text-align: left;
	}
	p#ButtonBorders {
		clear: both;
		color: #fff;
		background: #892e00;
		border-top: 10px solid #ad5c33;
		border-right: 1px dotted #ad5c33;
		border-bottom: 1px dashed #ad5c33;
		border-left: 1px dotted #ad5c33;
	}
	p#ButtonBorders a#Arrow {
		padding-right: 20px;
		background: url("http://www.email-standards.org/acid/img/arrow.gif") no-repeat right 2px;
	}
	p#ButtonBorders a {
		color: #fff;
		background-color: #892e00;
	}
	p#ButtonBorders a#Arrow:hover {
		background-position: right -38px;
	}
	#Floater {
		width: 470px;
	}
	#Floater #Left {
		float: left;
		width: 279px;
		height: 280px;
		color: #fff;
		background: #892e00;
		margin-bottom: 4px;
	}
	#Floater #Right {
		float: right;
		width: 187px;
		height: 280px;
		color: #fff;
		background: #892e00 url("http://www.email-standards.org/acid/img/ornament.gif") no-repeat right bottom;
		margin-bottom: 4px;
	}
	#Floater #Right p {
		color: #fff;
		background: transparent;
	}
	#FontInheritance {
		font-family: Georgia, Times, serif;
	}
	#MarginPaddingOut {
		padding: 20px;
	}
	#MarginPaddingOut #MarginPaddingIn {
		padding: 15px;
		color: #fff;
		background: #ad5c33;
	}
	#MarginPaddingOut #MarginPaddingIn img {
		background: url("http://www.email-standards.org/acid/img/bgPhoto.gif") no-repeat;
		padding: 15px;
	}
	span#SerifFont {
		font-family: Georgia, Times, serif;
	}
	p#QuotedFontFamily {
		font-family: "Trebuchet MS", serif;
	}
	#WidthHeight {
		width: 470px;
		height: 200px;
		color: #fff;
		background: #892e00;
	}
	#WidthHeight span {
		display: block;
		padding: 10px;
	}
	
</style>
</head>

<body>
<div id="BodyImposter">
	<div id="Box">
		<div id="FontInheritance">
			<h1>H1 headline (34px/1em)</h1>
			<h2>H2 headline (22px/1em)</h2>
			<h3>H3 headline (16px/1em)</h3>
		</div>
		<p>Paragraph (12px/1.5em) Lorem ipsum dolor sit amet, <a href="http://www.email-standards.org/" target="_blank" rel="noopener">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <span id="SerifFont">(This is a serif font inside of a paragraph styled with a sans-serif font.)</span> <small>(This is <code>small</code> text.)</small></p>
		<p id="QuotedFontFamily">This is a font (Trebuchet MS) which needs quotes because its label comprises two words.</p>
		<ul id="BulletBg">
			<li>background bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ul id="BulletListStyle">
			<li>list-style bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ol>
			<li>ordered list sit amet, consectetuer adipiscing elit</li>
			<li>sed diam nonummy nibh euismod tincidunt ut laoreet</li>

<li>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</li>
		</ol>
		<dl>
			<dt>Definition list</dt>
			<dd>lorem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
			<dd>sed diam nonummy nibh euismod tincidunt ut laoreet</dd>
			<dd>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</dd>
		</dl>
		<div id="Floater">
			<div id="Left">
				<div id="MarginPaddingOut">
					<div id="MarginPaddingIn">
						<img decoding="async" src="http://www.email-standards.org/acid/img/photo.jpg" width="180" height="180" alt="[photo: root canal]" />
					</div>
				</div>
			</div>
			<div id="Right">
				<p>Right float with a positioned background</p>
			</div>
		</div>
		<p id="ButtonBorders"><a href="http://www.email-standards.org/" target="_blank" id="Arrow" rel="noopener">Borders and an a:hover background image</a></p>
		<div id="WidthHeight">
			<span>Width = 470, height = 200</span>
		</div>
	</div>
</div>
</body>
</html>

Currently tested under FF3/3.5, Safari4, Chrome2/3, IE7/8, Opera9.6

Written by Frank Liu in: Open Source Releases,Web Development | Tags: CSS, email, HTML, jQuery

Apr
09
2009

CSS Implementation Chart for IE6,IE7 and IE8

Since Internet Explorer8 has just joined the infamous IE family, which added bit of work (chaos) in the compatibility war. We have designed the following tool to show the difference between the "recent" IE versions, namely 6,7 and 8. Hope this would help web developers who care about browser compatibility.

Referenced from MSDN: CSS Compatibility and IE

Show CSS3 Implementations
Show Difference Only
Show All IE versionsHide IE6Hide IE7Hide IE8

@ Rules

	IE6	IE7	IE8
@charset
@import
@media
@page
@font-face
@namespace

Selectors

	Note	IE6	IE7	IE8
.value { sRules }	Class
#value { sRules }	ID
E { sRules }	Type
* { sRules }	Universal
ns\|E { sRules }	Namespaced
[att=val] { sRules }	Equality [=]
[att] { sRules }	Existence []
[att\|=val] { sRules }	Hyphen [\|=]
[att~=val] { sRules }	Whitespace [~=]
[ns\|attr] { sRules }	Namespaced
[att^=val] { sRules }	Prefix [^=]
[att*=val] { sRules }	Substring [*=]
[att$=val] { sRules }	Suffix [$=]
E + F { sRules }	Adjacent Sibling (+)
E > F { sRules }	Child (>)
E F { sRules }	Descendant
E ~ F { sRules }	General Sibling (~)
:active { sRules }	:active
:first-child { sRules }	:first-child
:focus { sRules }	:focus
:hover { sRules }	:hover
:lang(C) { sRules }	:lang()
:link { sRules }	:link
:visited { sRules }	:visited
@page :first { sRules }	@page :first
@page :left { sRules }	@page :left
@page :right { sRules }	@page :right
:root { sRules }	:root
:nth-child() { sRules }	:nth-child()
:nth-last-child() { sRules }	:nth-last-child()
:nth-of-type() { sRules }	:nth-of-type()
:nth-last-of-type() { sRules }	:nth-last-of-type()
:last-child { sRules }	:last-child
:first-of-type { sRules }	:first-of-type
:last-of-type { sRules }	:last-of-type
:only-child { sRules }	:only-child
:only-of-type { sRules }	:only-of-type
:empty { sRules }	:empty
:target { sRules }	:target
:not(X) { sRules }	:not()
:enabled { sRules }	:enabled
:disabled { sRules }	:disabled
:checked { sRules }	:checked
:indeterminate { sRules }	:indeterminate
:default { sRules }	:default
:valid { sRules }	:valid
:invalid { sRules }	:invalid
:in-range { sRules }	:in-range
:out-of-range { sRules }	:out-of-range
:required { sRules }	:required
:optional { sRules }	:optional
:read-only { sRules }	:read-only
:read-write { sRules }	:read-write
:after { sRules }	:after
:before { sRules }	:before
:first-letter { sRules }	:first-letter
:first-line { sRules }	:first-line
::before { sRules }	::before
::after { sRules }	::after
::first-letter { sRules }	::first-letter
::first-line { sRules }	::first-line
::selection { sRules }	::selection
::value { sRules }	::value
::choices { sRules }	::choices
::repeat-item { sRules }	::repeat-item
::repeat-index { sRules }	::repeat-index
{ sRule!important? }	!important Declaration
{ list-style : sStyle }	list-style
{ list-style-image : sStyle }	list-style-image
{ list-style-position : sStyle }	list-style-position
{ list-style-type : sStyle }	list-style-type
{ color : sColor }	color
{ background : sBackground }	background
{ background-attachment : sAttachment }	background-attachment
{ background-color : sColor }	background-color
{ background-image : sLocation }	background-image
{ background-position : sPosition }	background-position
{ background-repeat : sRepeat }	background-repeat
{ color-profile : sProfile }	color-profile
{ rendering-intent : sIntent }	rendering-intent
{ background : sBackground1,sBackground2, etc. }	background (multiple)
{ background-clip : sClip }	background-clip
{ background-origin : sOrigin }	background-origin
{ background-break : sBreak }	background-break
{ background-size : sSize }	background-size
{ direction : sDirection }	direction
{ font : sFont }	font
{ font-family : sFamily }	font-family
{ font-size : sSize }	font-size
{ font-style : sStyle }	font-style
{ font-variant : sVariant }	font-variant
{ font-weight : sWeight }	font-weight
{ letter-spacing : sSpacing }	letter-spacing
{ line-height : sHeight }	line-height
{ text-align : sAlign }	text-align
{ text-decoration : sDecoration }	text-decoration
{ text-indent : sIndent }	text-indent
{ text-transform : sTransform }	text-transform
{ unicode-bidi : sAlign }	unicode-bidi
{ vertical-align : sAlign }	vertical-align
{ white-space : sWrap }	white-space
{ word-spacing : sSpacing }	word-spacing
{ font-effect : sEffect }	font-effect
{ font-emphasize : sEmphasize }	font-emphasize
{ font-size-adjust : sSizeAdjust }	font-size-adjust
{ font-smooth : sSmooth }	font-smooth
{ font-stretch : sStretch }	font-stretch
{ hanging-punctuation : sHangingPunctuation }	hanging-punctuation
{ punctuation-trim : sTrim }	punctuation-trim
{ ruby-align : sRubyAlign }	ruby-align
{ ruby-overhang : sRubyOverhang }	ruby-overhang
{ ruby-position : sRubyPlacement }	ruby-position
{ ruby-span : sRubySpan }	ruby-span
{ text-align-last : sAlignLast }	text-align-last
{ text-emphasis : sEmphasis }	text-emphasis
{ text-justify : sJustify }	text-justify
{ text-outline : sOutline }	text-outline
{ text-overflow : sOverflow}	text-overflow
{ text-shadow : sShadow }	text-shadow
{ text-wrap : sWrap }	text-wrap
{ word-break : sBreak }	word-break
{ word-wrap : sWrap }	word-wrap
{ writing-mode : sFlow }	writing-mode
{ content : sContent }	content
{ counter-increment : sCounter }	counter-increment
{ counter-reset : sCounter }	counter-reset
{ quotes : sQuotes }	quotes
{ border : sBorder }	border
{ border-bottom : sBottom }	border-bottom
{ border-bottom-color : sColor }	border-bottom-color
{ border-bottom-style : sStyle }	border-bottom-style
{ border-bottom-width : sWidth }	border-bottom-width
{ border-collapse : sCollapse }	border-collapse
{ border-color : sColor }	border-color
{ border-left : sLeft }	border-left
{ border-left-color : sColor }	border-left-color
{ border-left-style : sStyle }	border-left-style
{ border-left-width : sWidth }	border-left-width
{ border-right : sRight}	border-right
{ border-right-color : sColor }	border-right-color
{ border-right-style : sStyle }	border-right-style
{ border-right-width : sWidth }	border-right-width
{ border-spacing : sSpacing }	border-spacing
{ border-style : sStyle }	border-style
{ border-top : sTop }	border-top
{ border-top-color : sColor }	border-top-color
{ border-top-style : sStyle }	border-top-style
{ border-top-width : sWidth }	border-top-width
{ border-width : sWidth }	border-width
{ caption-side : sLocation }	caption-side
{ clear : sClear }	clear
{ empty-cells : sEmptyCells }	empty-cells
{ float : sFloat }	float
{ margin : sMargin }	margin
{ margin-bottom : sHeight }	margin-bottom
{ margin-left : sWidth }	margin-left
{ margin-right : sWidth }	margin-right
{ margin-top : sHeight }	margin-top
{ padding : sPadding }	padding
{ padding-bottom : sPadding }	padding-bottom
{ padding-left : sPadding }	padding-left
{ padding-right : sPadding }	padding-right
{ padding-top : sPadding }	padding-top
{ table-layout : sLayout }	table-layout
{ border-break : sBreak }	border-break
{ border-image : sImage }	border-image
{ border-radius : sRadius }	border-radius
{ box-shadow : sShadow }	box-shadow
{ bottom : sBottom }	bottom
{ clip : sClip }	clip
{ display : sDisplay }	display
{ height : sHeight }	height
{ left : sPosition }	left
{ max-height : sMaxHeight }	max-height
{ max-width : sWidth }	max-width
{ min-height : sMinHeight }	min-height
{ min-width : sMinWidth }	min-width
{ overflow : sOverflow }	overflow
{ position : sPosition }	position
{ right : sPosition }	right
{ top : sTop }	top
{ visibility : sVisibility }	visibility
{ width : sWidth }	width
{ z-index : vOrder }	z-index
{ overflow-x : sOverflow }	overflow-x
{ overflow-y : sOverflow }	overflow-y
{ orphans : nLines }	orphans
{ page-break-after : sBreak }	page-break-after
{ page-break-before : sBreak }	page-break-before
{ page-break-inside : sBreak }	page-break-inside
{ widows : nLines }	widows
{ fit : sFit }	fit
{ fit-position : sPosition }	fit-position
{ image-orientation : sOrientation }	image-orientation
{ page : sPage }	page
{ size : sSize }	size
{ cursor : sCursor }	cursor
{ outline : sOutline }	outline
{ outline-color : sColor }	outline-color
{ outline-style : sStyle }	outline-style
{ outline-width : sWidth }	outline-width
{ appearance : sAppearance }	appearance
{ box-sizing : sSizing }	box-sizing
{ icon : sIcon }	icon
{ nav-down : sNavDown }	nav-down
{ nav-index : sIndex }	nav-index
{ nav-left : sNavLeft }	nav-left
{ nav-right : sNavRight }	nav-right
{ nav-up : sNavUp }	nav-up
{ outline-offset : sOffset }	outline-offset
{ outline-radius : sRadius }	outline-radius
{ resize : sResize }	resize
{ column-break-after : sSize }	column-break-after
{ column-break-before : sSize }	column-break-before
{ column-break-inside : sSize }	column-break-inside
{ column-count : sCount }	column-count
{ column-gap : sSize }	column-gap
{ column-rule : sRule }	column-rule
{ columns : sColumns }	columns

Values

	IE6	IE7	IE8
<number>
<length>
<percentage>
<integer>
<angle>
<time>
<frequency>
<string>
\code
rect()
url()
counter()
attr()
calc()
<color> (names)
<color> (#rrggbb or #rgb Notation)
<color> (rgb(r,g,b) Notation)
<color> (system colors)
transparent
<color> (rgba(r,g,b,a) Notation)
<color> (hsl(h,s,l) Notation)
<color> (hsla(h,s,l,a) Notation)
auto
inherit
initial

Written by Frank Liu in: Web Development | Tags: Comparison, CSS, Internet Explorer

Mar
20
2009

Good news or Bad news, IE8 is here

To those who worked hard on getting IE8 released on schedule, congratulations! In the same time we feel sorry to those who care about website compatibility, this means you have one more IE to hack on. Maybe this is the way how Microsoft helps to create jobs in the crisis, thanks! Anyway here's some critics from my own opinion. Firstly it took over 15 minutes to upgrade my IE8 RC1 to IE8 with two restarts. If you haven't noticed IE8 by default is not backward compatible to its predecessors. A good example is the 'opacity' in css, to get your page displayed correctly in IE8 you need to. Either in the <head> tag put,

or write something like this in the CSS,

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

However this may break PNG images with alpha channel from displaying properly. Yes, another PNG issue, :-< Read more on Bb RealTech If you want find out more about difference IE8 has to offer, please check out CSS3.info Enjoy hacking another IE!

Written by Frank Liu in: Web Development | Tags: CSS, IE8, Internet Explorer

Think Work Learn Share

FREE Instant Email Standard Test Tool

Email Client:

Images:

CSS Implementation Chart for IE6,IE7 and IE8

@ Rules

Selectors

Values

Good news or Bad news, IE8 is here

Categories

Recent Posts

Archives

Recent Comments

Orite Blog

Think Work Learn Share

FREE Instant Email Standard Test Tool

Email Client:

Images:

CSS Implementation Chart for IE6,IE7 and IE8

@ Rules

Selectors

Values

Good news or Bad news, IE8 is here

Categories

Recent Posts

Archives

Recent Comments

Tag Could