tag:blogger.com,1999:blog-3792315902963224392024-02-20T10:25:31.860-08:00Cross browser html/css tricksUnknownnoreply@blogger.comBlogger3125tag:blogger.com,1999:blog-379231590296322439.post-89919194534232280942012-02-26T01:39:00.001-08:002012-02-26T01:39:16.811-08:00How to Code HTML Email Template<div dir="ltr" style="text-align: left;" trbidi="on">
HTML emails are a popular marketing tool and you will almost definitely come across clients that want you to build them. So here are some tips and rules to code a good email template.<br />
<br />
<b>#1 Use TABLES for the layout.</b><br />
<br />
Here’s a simple example.
<br />
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;"><<span style="color: black; font-weight: bold;">table</span> <span style="color: #000066;">cellspacing</span><span style="color: #66cc66;">=</span><span style="color: red;">"0"</span> <span style="color: #000066;">cellpadding</span><span style="color: #66cc66;">=</span><span style="color: red;">"10"</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: red;">"0"</span>></span>
<span style="color: #009900;"><<span style="color: black; font-weight: bold;">tr</span>></span>
<span style="color: #009900;"><<span style="color: black; font-weight: bold;">td</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: red;">"100"</span>><<span style="color: #66cc66;">/</span><span style="color: black; font-weight: bold;">td</span>></span>
<span style="color: #009900;"><<span style="color: black; font-weight: bold;">td</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: red;">"200"</span>><<span style="color: #66cc66;">/</span><span style="color: black; font-weight: bold;">td</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: black; font-weight: bold;">tr</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: black; font-weight: bold;">table</span>></span></pre>
<br />
<b>#2 Use inline CSS</b><br />
<br />
HTML emails do support limited CSS, but you can’t use an external
style sheet. Instead, you use inline CSS to style the various elements
in the tables.<br />
<br />
<div class="wp_syntax">
<div class="code">
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;"><<span style="color: black; font-weight: bold;">p</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: red;">"background: #cccccc; color: white;"</span>></span>Some text goes here.<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: black; font-weight: bold;">p</span>></span></pre>
<pre class="html4strict" style="font-family: monospace;"><span style="color: #009900;"> </span></pre>
</div>
</div>
The snippet above shows you the basic syntax for inline CSS. As you
can see, the code is essentially the same, you just embed it right into
the code of your HTML rather than linking to another document. <br />
<br />
<b>#3 Be Careful With Images and Width</b><br />
<br />
Use a small document width of the email template (600px) most of mailers don't support a wide width. Image need to be uploaded to a server. Be careful with background images its not a good idea to use it as some of mailers (like hotmail) don't support that css option.<br />
<br />
<b>#4 Test your code</b><br />
<br />
After you build a the tenmplate it need to be tested and I'm not talking only about Internet Explorer, Firefox, Chrome is even worse it need to be tested in most popular used email clients Gmail, Yahoo, Hotmail, Outlook, AOL etc.</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-379231590296322439.post-6710392071777444292012-02-25T01:00:00.001-08:002012-02-25T01:03:58.446-08:00Cross-browser CSS3 rounded corners<div dir="ltr" style="text-align: left;" trbidi="on">
Almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 <code>border-radius</code>, but <b>unfortunately</b> none of a versions of Internet Explorer (even IE8) does not support this property.<br />
<br />
<h3>
Step 1. Border-radius for modern browsers</h3>
This is the way that works in all modern browsers (except IE8) like <b>FireFox, Safari, Chrome and Opera since 10.50 pre-alpha</b>:<br />
<br />
<pre style="font-family: monospace;"><span style="color: #6666ff;">.rounded-corners</span> <span style="color: #00aa00;">{</span>
-moz-border-radius<span style="color: #00aa00;">:</span> <span style="color: #993333;">10px</span><span style="color: #00aa00;">;</span> <span style="color: grey; font-style: italic;">/* Firefox */</span>
-webkit-border-radius<span style="color: #00aa00;">:</span> <span style="color: #993333;">10px</span><span style="color: #00aa00;">;</span> <span style="color: grey; font-style: italic;">/* Safari, Chrome */</span>
-o-border-radius<span style="color: #00aa00;">:</span> <span style="color: #993333;">10px</span><span style="color: #00aa00;">;</span> <span style="color: grey; font-style: italic;">/* Opera */</span>
border-radius<span style="color: #00aa00;">:</span> <span style="color: #993333;">10px</span><span style="color: #00aa00;">;</span> <span style="color: grey; font-style: italic;">/* CSS3 */</span>
<span style="color: #00aa00;">}</span>
<span style="color: #00aa00;"> </span></pre>
<h3>
Step 2. Border-radius for Internet Explorer</h3>
<h3>
<span style="font-weight: normal;">Download the </span><a href="http://curved-corner.googlecode.com/files/border-radius.htc" style="font-weight: normal;" target="_blank">Download</a><span style="font-weight: normal;"> file, put it somewhere on your site, and then use this CSS code:</span></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family: monospace;"><span style="color: #6666ff;">.rounded-corners</span> <span style="color: #00aa00;">{</span>
behavior<span style="color: #00aa00;">:</span> <span style="color: #993333;">url</span><span style="color: #00aa00;">(</span><span style="color: red; font-style: italic;">http://yoursite.com/border-radius.htc</span><span style="color: #00aa00;">)</span><span style="color: #00aa00;">;</span>
<span style="color: #00aa00;">}</span></pre>
<pre class="css" style="font-family: monospace;"><span style="color: #00aa00;"> </span></pre>
And replace <b>http://yoursite.com/</b> on your absolute path, where you have placed the border-radius.htc file.<br />
I think it’s better to put this CSS in a separate file and connect it using conditional comments:<br />
<pre class="css" style="font-family: monospace;"><span style="color: #00aa00;"> </span></pre>
<div class="wp_syntax">
<div class="code">
<pre class="html" style="font-family: monospace;"><span style="color: grey; font-style: italic;"><!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" </span></pre>
<pre class="html" style="font-family: monospace;"><span style="color: grey; font-style: italic;">media="screen, projection" /><![endif]--></span></pre>
</div>
</div>
<pre class="css" style="font-family: monospace;"><span style="color: #00aa00;"> </span></pre>
</div>
</div>
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<pre class="css" style="font-family: monospace;"><span style="color: #00aa00;"> </span></pre>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-379231590296322439.post-77321165508408624832012-02-25T00:27:00.001-08:002012-02-25T00:35:26.106-08:00Cross browser css float clearing<div dir="ltr" style="text-align: left;" trbidi="on">
<h4>
Solution 1: The :after Pseudo-Element (Best one)</h4>
The <code>:after</code> pseudo-element adds an element to the
rendered HTML page. This method has been used quite extensively to
resolve float-clearing issues. Here is how the CSS looks:<br />
<br />
<pre>.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}</pre>
<pre> </pre>
The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.<br />
But this method does not work in Internet Explorer up to version 7,
so an IE-only style needs to be set with one of the following rules:<br />
<br />
<pre>.clearfix {
display: inline-block;
}
.clearfix {
zoom: 1;
}</pre>
<pre> </pre>
<pre>Depending on the type of issue you’re dealing with, one of the above two
solutions will resolve the issue in Internet Explorer. It should be
noted that the <code>zoom</code> property is a non-standard Microsoft proprietary property,</pre>
<pre> and will cause your CSS to become invalid. </pre>
<br />
<h4>
Solution 2: New element with a clear: both option.(Old one)</h4>
<h4 style="font-weight: normal;">
This is an outdated method, but is an easy option. Simply add an extra
element at the bottom of the container and “clear” it. Here’s how the
HTML would look after this method is implemented:</h4>
<div><br />
<div style="float: left">Some floated text</div> <br />
<p>Some unfloated text</p><br />
<br />
<pre class="html" style="overflow: auto;"> <div style="clear: both"></div>
</div></pre>
</div><br />
<br />
<h4>
Solution 3: Overflow Property</h4>
By far the best, and easiest solution to resolve the collapsing parent issue is to add <code>overflow: hidden</code> or <code>overflow: auto</code> to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.<br />
You’ll notice I said “almost” all browsers. This is because it does
not work in IE6. But, in many cases, the parent container will have a
set width, which fixes the issue in IE6. If the parent container does
not have a width, you can add an IE6-only style with the following code:<br />
<br />
<pre>// This fix is for IE6 only
.clearfix {
height: 1%;
overflow: visible;
}</pre>
<pre> </pre>
In IE6, the <code>height</code> property is incorrectly treated as <code>min-height</code>, so this forces the container to enclose its children. The <code>overflow</code> property is then set back to “visible”, to ensure the content is not hidden or scrolled.<br />
The only drawback to using the <code>overflow</code> method (in any
browser) is the possibility that the containing element will have
scrollbars or hide content. If there are any elements with negative
margins or absolute positioning inside the parent, they will be obscured
if they go beyond the parent’s borders, so this method should be used
carefully. It should also be noted that if the containing element has to
have a specified <code>height</code>, or <code>min-height</code>, then you would definitely not be able to use the <code>overflow</code> method.<br />
So, there really is no simple, cross-browser solution to the
collapsing parent issue. But almost any float clearing issue can be
resolved with one of the above methods.<br />
<pre> </pre>
<br />
<h4>
</h4>
<br />
<br />
<pre> </pre>
</div>Unknownnoreply@blogger.com0