<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>de77.com</title>
	<atom:link href="http://de77.com/feed" rel="self" type="application/rss+xml" />
	<link>http://de77.com</link>
	<description>a few words about web development</description>
	<lastBuildDate>Tue, 01 Nov 2011 12:13:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Few very useful PHP functions</title>
		<link>http://de77.com/php/few-very-useful-php-functions</link>
		<comments>http://de77.com/php/few-very-useful-php-functions#comments</comments>
		<pubDate>Tue, 01 Nov 2011 12:13:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[function]]></category>

		<guid isPermaLink="false">http://de77.com/?p=646</guid>
		<description><![CDATA[In this post I would like to <a href="http://www.o2.co.uk/broadband/mobile/">present</a> a few PHP functions which I created for projects I worked on and which I found very useful many times.
The functions are not super-advanced, but really handy. You can use them freely as they all are licensed under MIT.
I think there is a big chance you will find them useful too. If you do- please leave a comment, thanks!]]></description>
			<content:encoded><![CDATA[<p>In this post I would like to <a href="http://www.o2.co.uk/broadband/mobile/">present</a> a few PHP functions which I created for projects I worked on and which I found very useful many times.<br />
&nbsp;<br />
The functions are not super-advanced, but really handy. You can use them freely as they all are licensed under MIT.<br />
&nbsp;<br />
I think there is a big chance you will find them useful too. If you do- please leave a comment, thanks!<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<h2>Nice date</h2>
<p>This function shows date formatted as &#8220;Y-m-d&#8221; for dates older than today or &#8220;today H:i&#8221; for today&#8217;s dates.</p>
<pre class="brush: plain;">
function niceDate($date)
	{
		if (substr($date, 0, 10) == date('Y-m-d'))
		{
			return 'today, ' . substr($date, 11, 5);
		}
		return substr($date, 0, 10);
	}
</pre>
<h2>File icon</h2>
<p>Here&#8217;s a function which returns image icon for a set of predefined file types (based on extension).</p>
<pre class="brush: plain;">
function makeIcon($file)
{
	$ico = substr($file, strrpos($file, '.'));
	switch ($ico)
	{
		case 'pdf':
		case 'doc':
		case 'rtf':	$icon = 'document.png'; break;
		case 'zip':
		case 'rar':
		case '7z' :
		case 'tar':
		case 'gz' : $icon = 'archive.png'; break;
		default   : $icon = 'default.png'; break;
	}
	return $icon;
}
</pre>
<h2>Shorten text</h2>
<p>Make text shorten, but don&#8217;t cut words!</p>
<pre class="brush: plain;">
function shorten($str, $len = 50)
	{
		$cut = &quot;\x1\x2\x3&quot;;
		$str = strip_tags($str);
		list($str) = explode($cut, wordwrap($str, $len, $cut));
		return $str;
	}
</pre>
<h2>List files in a directory</h2>
<p>This function lists files in a directory. It ignores subdirectories.</p>
<pre class="brush: plain;">
function scandir2($dir)
{
	$out = array();
	if (is_dir($dir))
	{
	    if ($dh = opendir($dir))
		{
	        while (($file = readdir($dh)) !== false)
			{
	            if ($file == '.' or $file == '..') continue;

				if (!is_dir($dir . '/'. $file))
	            {
				    $out[] = $dir . '/' . $file;
				}
	        }
	        closedir($dh);
	    }
	}
	sort($out);
	return $out;
}
</pre>
<h2>Return next value from a set of values</h2>
<p>Given a set of values it returns next value each time it is called. Example:<br />
cycle(&#8216;one&#8217;,'two&#8217;); cycle(&#8216;one&#8217;,'two&#8217;); cycle(&#8216;one&#8217;,'two&#8217;);<br />
will print &#8216;one&#8217;, then &#8216;two&#8217;, then &#8216;one&#8217;.<br />
Can be used in HTML templates:</p>
<pre class="brush: plain;">
&lt;?php for ($i=0; $i&lt;5; $i++) { ?&gt;
&lt;div style=&quot;color: &lt;?php cycle('red','white','blue') ?&gt;&quot;&gt;Text here&lt;/div&gt;
&lt;?php } ?&gt;
</pre>
<pre class="brush: plain;">
function cycle()
{
	global $cycleCounter;
	$cycleCounter = isset($cycleCounter) ? $cycleCounter+1 : 0;
	$cycleCounter = $cycleCounter % func_num_args();

	echo func_get_arg($cycleCounter);
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/php/few-very-useful-php-functions/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Common JavaScript/jQuery bugs in IE6-7-8</title>
		<link>http://de77.com/html/common-javascriptjquery-bugs-in-ie6-7-8</link>
		<comments>http://de77.com/html/common-javascriptjquery-bugs-in-ie6-7-8#comments</comments>
		<pubDate>Mon, 30 May 2011 13:39:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://de77.com/?p=643</guid>
		<description><![CDATA[I always write my JavaScript scripts in Firefox, I test them in Firefox and then I move to Opera and Chrome/Safari. After my script works in all above browsers I try to make it work in IE at least version 8 (but sometimes also 7 and even 6).
Usually there are none to very little changes needed to port a script from Firefox to Opera &#038; Chrome/Safari. Especially when I use jQuery library, but IE... that's a different story.]]></description>
			<content:encoded><![CDATA[<p>I always write my JavaScript scripts in Firefox, I test them in Firefox and then I move to Opera and Chrome/Safari. After my script works in all above browsers I try to make it work in IE at least version 8 (but sometimes also 7 and even 6).<br />
Usually there are none to very little changes needed to port a script from Firefox to Opera &#038; Chrome/Safari. Especially when I use jQuery library, but IE&#8230; that&#8217;s a different story.<br />
Seems that IE doesn&#8217;t like variables without &#8220;var&#8221; word, so always change:</p>
<pre class="brush: plain;">
str = 'Hello World';
</pre>
<p>into</p>
<pre class="brush: plain;">
var str= 'Hello World';
</pre>
<p>IE doesn&#8217;t like uncompleted HTML code. Other browsers try to understand what should it be, but not IE. Once I made a small but I wrote a code like this:</p>
<pre class="brush: plain;">
$('body').append(
'&lt;div&gt;&lt;div class=&quot;background&quot;&gt;&lt;/div&gt;' +
'&lt;input type=&quot;hidden&quot; class=&quot;parent&quot; value=&quot;' + parent + '&quot;&gt;&lt;/div&gt;' +
'&lt;/div&gt;');
</pre>
<p>It worked just fine in Firefox, Opera and Safari/Chrome, but not in IE. No bug was shown, but the element was not created.<br />
The solution? I used 1 &#8220;</p></div>
<p>&#8221; which I should not. The correct code is:</p>
<pre class="brush: plain;">
$('body').append(
'&lt;div&gt;&lt;div class=&quot;background&quot;&gt;&lt;/div&gt;' +
'&lt;input type=&quot;hidden&quot; class=&quot;parent&quot; value=&quot;' + parent + '&quot;&gt;' +
'&lt;/div&gt;');
</pre>
<p>This stupid mistake cost me some unnecessary problems. If you have similar problem (IE doesn&#8217;t create elements) please check your generated HTML. It might have a bug somewhere.</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/html/common-javascriptjquery-bugs-in-ie6-7-8/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PHP Error: unserialize() [function.unserialize]: Error at offset 118 of 512</title>
		<link>http://de77.com/php/php-error-unserialize-function-unserialize-error-at-offset-118-of-512</link>
		<comments>http://de77.com/php/php-error-unserialize-function-unserialize-error-at-offset-118-of-512#comments</comments>
		<pubDate>Mon, 30 May 2011 13:03:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[error]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[json_encode]]></category>
		<category><![CDATA[unserialize]]></category>
		<category><![CDATA[utf-8]]></category>
		<category><![CDATA[utf8]]></category>

		<guid isPermaLink="false">http://de77.com/?p=640</guid>
		<description><![CDATA[Lately I got this error in my script while trying to decode serialized UTF-8 string:

unserialize() [function.unserialize]: Error at offset 118 of 512 

Here's a simple solution I found. ]]></description>
			<content:encoded><![CDATA[<p>Lately I got this error in my script while trying to decode serialized UTF-8 string:</p>
<pre class="brush: plain;">
unserialize() [function.unserialize]: Error at offset 118 of 512
</pre>
<p>Here&#8217;s a simple solution I found. Instead of using unserialize() you should use mb_unserialize():</p>
<pre class="brush: plain;">
function mb_unserialize($str)
{
    $res = preg_replace('!s:(\d+):&quot;(.*?)&quot;;!se', &quot;'s:'.strlen('$2').':\&quot;$2\&quot;;'&quot;, $str );
    return unserialize($res);
}
</pre>
<p>You can also think about replacing in your program serialize() + unserialize() with json_encode() + json_decode(). Your data should be safer then.</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/php/php-error-unserialize-function-unserialize-error-at-offset-118-of-512/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Gradient-filled colorful boxes &#8211; in CSS</title>
		<link>http://de77.com/css/gradient-filled-colorful-boxes-in-css</link>
		<comments>http://de77.com/css/gradient-filled-colorful-boxes-in-css#comments</comments>
		<pubDate>Mon, 02 May 2011 02:22:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[box]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[fill]]></category>
		<category><![CDATA[gradient]]></category>

		<guid isPermaLink="false">http://de77.com/?p=636</guid>
		<description><![CDATA[Want to make a nice gradient colored box without using ugly background images? Just apply this set of rules to any element, like DIV:
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
&#160;&#160;&#160;

background-color: #00FF00;
background-image: -moz-linear-gradient(top, #00FF00, #FFFF00); /* Firefox */
background-image: -ms-linear-gradient(top, #00FF00, #FFFF00); /* IE10 */
background-image: -o-linear-gradient(top, #00FF00, #FFFF00); /* Opera  */
background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFFF00)); /* Safari/Chrome */
background-image: -webkit-linear-gradient(top, [...]]]></description>
			<content:encoded><![CDATA[<p>Want to make a nice gradient colored box without using ugly background images? Just apply this set of rules to any element, like DIV:<br />
<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />
<br />&nbsp;<br />&nbsp;<br />&nbsp;</p>
<pre class="brush: plain;">
background-color: #00FF00;
background-image: -moz-linear-gradient(top, #00FF00, #FFFF00); /* Firefox */
background-image: -ms-linear-gradient(top, #00FF00, #FFFF00); /* IE10 */
background-image: -o-linear-gradient(top, #00FF00, #FFFF00); /* Opera  */
background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFFF00)); /* Safari/Chrome */
background-image: -webkit-linear-gradient(top, #00FF00, #FFFF00); /* Chrome 10/Safari5 */
background-image: linear-gradient(top, #00FF00, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00FF00', EndColorStr='#FFFF00'); /* IE8 */
</pre>
<p>The result:</p>
<div style="height:50px; width: 200px; background-color: #00FF00;background-image: -moz-linear-gradient(top, #00FF00, #FFFF00);background-image: -ms-linear-gradient(top, #00FF00, #FFFF00); background-image: -o-linear-gradient(top, #00FF00, #FFFF00); background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFFF00));background-image: -webkit-linear-gradient(top, #00FF00, #FFFF00); background-image: linear-gradient(top, #00FF00, #999999);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00FF00', EndColorStr='#FFFF00');"></div>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/css/gradient-filled-colorful-boxes-in-css/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rotating elements in CSS aka How to make diagonal line in CSS</title>
		<link>http://de77.com/css/rotating-elements-in-css-aka-how-to-make-diagonal-line-in-css</link>
		<comments>http://de77.com/css/rotating-elements-in-css-aka-how-to-make-diagonal-line-in-css#comments</comments>
		<pubDate>Mon, 02 May 2011 02:05:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[diagonal]]></category>
		<category><![CDATA[rotate]]></category>

		<guid isPermaLink="false">http://de77.com/?p=620</guid>
		<description><![CDATA[If you want to make a diagonal line in CSS you can just draw a rectangle with height so small it's almost a line and then rotate it a bit. ]]></description>
			<content:encoded><![CDATA[<p>If you want to make a diagonal line in CSS you can just draw a rectangle with height so small it&#8217;s almost a line and then rotate it a bit. For example make a div and set it&#8217;s width to 100px and height to 2px, then make it&#8217;s background-color black.<br />
<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />
To rotate an element in CSS you need to use below rules.</p>
<pre class="brush: plain;">
-moz-transform:rotate(120deg); /* Firefox */
-webkit-transform:rotate(120deg); /* WebKit: Chrome/Safari */
-o-transform:rotate(120deg); /* Opera */
-ms-transform:rotate(120deg); /* IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104,
M12=-0.13052619222005157,
M21=0.13052619222005157,
M22=0.9914448613738104, sizingMethod='auto expand'); /* IE8 */
</pre>
<p>
The result can look like this:<br />
<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</p>
<div style="width:100px; height:2px; background-color: black;-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);-o-transform:rotate(120deg); -ms-transform:rotate(120deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');"></div>
<p>&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/css/rotating-elements-in-css-aka-how-to-make-diagonal-line-in-css/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to use jQuery in Magento aka jQuery Compatible Mode</title>
		<link>http://de77.com/javascript/how-to-use-jquery-in-magento-aka-jquery-compatible-mode</link>
		<comments>http://de77.com/javascript/how-to-use-jquery-in-magento-aka-jquery-compatible-mode#comments</comments>
		<pubDate>Tue, 05 Apr 2011 21:26:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[magento]]></category>
		<category><![CDATA[prototypejs]]></category>

		<guid isPermaLink="false">http://de77.com/?p=468</guid>
		<description><![CDATA[Magento shop is using PrototypeJS library which is registering $ for itself. jQuery library wants to do the same thing, that's why in order to use jQuery in a website which uses PrototypeJS (or similar library) you need to put it into Compatibility Mode.]]></description>
			<content:encoded><![CDATA[<p>Magento shop is using PrototypeJS library which is registering $ for itself. jQuery library wants to do the same thing, that&#8217;s why in order to use jQuery in a website which uses PrototypeJS (or similar library) you need to put it into Compatibility Mode. How?<br />
Instead of:<br />
<code><br />
     $(document).ready(function(){<br />
       $("div").hide();<br />
     });<br />
</code><br />
you need to write your code this way:<br />
<code><br />
     var $j = jQuery.noConflict();<br />
     $j(document).ready(function(){<br />
       $j("div").hide();<br />
     });<br />
</code><br />
So as you noted the difference is adding: var $j = jQuery.noConflict();<br />
and using $j instead of $.</p>
<p>You can read more on this subject here: <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries">Using jQuery with Other Libraries</a></p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/javascript/how-to-use-jquery-in-magento-aka-jquery-compatible-mode/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to analyze HTTP headers generated&amp;received</title>
		<link>http://de77.com/other/how-to-analyze-http-headers-generatedreceived</link>
		<comments>http://de77.com/other/how-to-analyze-http-headers-generatedreceived#comments</comments>
		<pubDate>Tue, 05 Apr 2011 21:21:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Other]]></category>
		<category><![CDATA[get]]></category>
		<category><![CDATA[header]]></category>
		<category><![CDATA[http]]></category>
		<category><![CDATA[post]]></category>

		<guid isPermaLink="false">http://de77.com/?p=480</guid>
		<description><![CDATA[Analyzing HTTP headers is a great way to debug websites. This is the easiest way to check what data was actually returned by Ajax request or find out if a website redirected us to another place. You can also check POST and GET fields sent by the browser and even modify then on the fly.]]></description>
			<content:encoded><![CDATA[<p>Analyzing HTTP headers is a great way to debug websites. This is the easiest way to check what data was actually returned by Ajax request or find out if a website redirected us to another place. You can also check POST and GET fields sent by the browser and even modify then on the fly.<br />
There are two great Firefox plugins I use and I want to recommend you.<br />
First is <a href="https://addons.mozilla.org/en-US/firefox/addon/3829/">Live HTTP Headers (click to download)</a><br />
This add-on was downloaded over 2 million times and is always compatible with the newest Firefox.</p>
<p>The other one, but one I like most, is <a href="https://addons.mozilla.org/en-US/firefox/addon/966/">Tamper Data (click to download)</a>. This is what I use for everyday debugging.<br />
After you install it just click Tools->Tamper Data and then reload a website.</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/other/how-to-analyze-http-headers-generatedreceived/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Web Fonts- set of free fonts to use on any website</title>
		<link>http://de77.com/css/google-web-fonts-set-of-free-fonts-to-use-on-any-website</link>
		<comments>http://de77.com/css/google-web-fonts-set-of-free-fonts-to-use-on-any-website#comments</comments>
		<pubDate>Tue, 05 Apr 2011 20:58:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[font-face]]></category>
		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">http://de77.com/?p=613</guid>
		<description><![CDATA[Here's a nice alternative to TypeKit. It's free no matter how many visitor you have on your website, you can use an API or just download the fonts and use @font-face to embed them on your website. You can also download and install them in your OS and use in graphic editors to make nice headers or whatever you need!]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a nice alternative to TypeKit. It&#8217;s free no matter how many visitor you have on your website, you can use an API or just download the fonts and use @font-face to embed them on your website. You can also download and install them in your OS and use in graphic editors to make nice headers or whatever you need!<br />
What I am talking about? <a href="http://www.google.com/webfonts?subset=latin">Google Web Fonts</a>.<br />
All fonts are open source, so you are free to do almost anything with them. There are fonts for Latin, Cyrillic, Khmer and Greek alphabets.<br />
And here is an example on how to use a font from Google Web Fonts directory:<br />
<code><br />
&lt;link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'&gt;<br />
&lt;div style="font-family: Cabin Sketch"&gt;Hello World&lt;/div&gt;<br />
</code><br />
And the result in your browser:</p>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'>
<div style="font-family: Cabin Sketch;font-size: 50px">Hello World</div>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/css/google-web-fonts-set-of-free-fonts-to-use-on-any-website/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to make a circle or elipsis in pure CSS?</title>
		<link>http://de77.com/css/how-to-make-a-circle-or-elipsis-in-pure-css</link>
		<comments>http://de77.com/css/how-to-make-a-circle-or-elipsis-in-pure-css#comments</comments>
		<pubDate>Tue, 05 Apr 2011 20:51:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[circle]]></category>
		<category><![CDATA[elipsis]]></category>

		<guid isPermaLink="false">http://de77.com/?p=575</guid>
		<description><![CDATA[Why would one want to make a circle or elipsis in just pure CSS? Because you can easily change the color and size using CSS and it looks great even when upscaled!
And how to do it, well, it&#8217;s extremely simple- let&#8217;s create a small rectangle:

&#60;div style="width:70px; height:50px; background-color: red"&#62;&#60;/div&#62;

and then let&#8217;s add rounded corners to [...]]]></description>
			<content:encoded><![CDATA[<p>Why would one want to make a circle or elipsis in just pure CSS? Because you can easily change the color and size using CSS and it looks great even when upscaled!<br />
And how to do it, well, it&#8217;s extremely simple- let&#8217;s create a small rectangle:<br />
<code><br />
&lt;div style="width:70px; height:50px; background-color: red"&gt;&lt;/div&gt;<br />
</code><br />
and then let&#8217;s add rounded corners to it:<br />
<code><br />
-moz-border-radius: 200px;<br />
-webkit-border-radius: 200px;<br />
-o-border-radius: 200px;<br />
border-radius: 200px<br />
</code><br />
The result:</p>
<div style="width:70px; height:50px; background-color: red; -moz-border-radius: 200px">&nbsp;</div>
<p>Easy, right?</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/css/how-to-make-a-circle-or-elipsis-in-pure-css/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Some TTF fonts don&#8217;t work with @font-face. How to fix them</title>
		<link>http://de77.com/other/some-ttf-fonts-dont-work-with-font-face-how-to-fix-them</link>
		<comments>http://de77.com/other/some-ttf-fonts-dont-work-with-font-face-how-to-fix-them#comments</comments>
		<pubDate>Tue, 05 Apr 2011 20:43:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Other]]></category>
		<category><![CDATA[EOT]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[font-face]]></category>
		<category><![CDATA[TTF]]></category>

		<guid isPermaLink="false">http://de77.com/?p=604</guid>
		<description><![CDATA[Recently I created a nice True Type font (.TTF) to embed on my website using CSS3 @font-face technique. Unfortunately it completely didn't work- not in Firefox, not in Opera- just not at all. I replaced my font file with another one and it worked just fine in the web browsers. I installed my font in my OS and then I could use it with any application, like OpenOffice or Corel Draw.]]></description>
			<content:encoded><![CDATA[<p>Recently I created a nice True Type font (.TTF) to embed on my website using CSS3 @font-face technique. Unfortunately it completely didn&#8217;t work- not in Firefox, not in Opera- just not at all. I replaced my font file with another one and it worked just fine in the web browsers. I installed my font in my OS and then I could use it with any application, like OpenOffice or Corel Draw.<br />
I still have no idea what was wrong with my font file, but I found a nice file converter which converted the font from TTF into SVG (Scalable Vector Graphics- used by iPhone/iPad), EOT (Embedded Open Type- for Internet Explorer) and WOFF (Web Open Font Format- for many browsers) and even TTF (True Type Font). It appeared that the output TTF file is a big bigger then my original TTF, but luckily- it works in the web browsers.<br />
To do the conversion you can try this awesome, free online tool: <a href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel FontFace Generator</a>.<br />
Hope it will also fix your problem!</p>
]]></content:encoded>
			<wfw:commentRss>http://de77.com/other/some-ttf-fonts-dont-work-with-font-face-how-to-fix-them/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

