<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>CSS Circle &#187; css tricks</title>
	<atom:link href="http://csscircle.wordpress.com/tag/css-tricks/feed/" rel="self" type="application/rss+xml" />
	<link>http://csscircle.wordpress.com</link>
	<description>4 easy and better web</description>
	<lastBuildDate>Sat, 07 Nov 2009 09:05:51 +0000</lastBuildDate>
	<generator>http://wordpress.com/</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<cloud domain='csscircle.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://www.gravatar.com/blavatar/65b3775d6d5c0f65599891a1d5330c83?s=96&#038;d=http://s.wordpress.com/i/buttonw-com.png</url>
		<title>CSS Circle &#187; css tricks</title>
		<link>http://csscircle.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://csscircle.wordpress.com/osd.xml" title="CSS Circle" />
		<item>
		<title>May 12th/ Top reasons your CSS columns are messed up</title>
		<link>http://csscircle.wordpress.com/2008/12/10/may-12th-top-reasons-your-css-columns-are-messed-up/</link>
		<comments>http://csscircle.wordpress.com/2008/12/10/may-12th-top-reasons-your-css-columns-are-messed-up/#comments</comments>
		<pubDate>Wed, 10 Dec 2008 13:25:40 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[css advanced list]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>
		<category><![CDATA[IE bugs]]></category>
		<category><![CDATA[ie fix]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=74</guid>
		<description><![CDATA[

I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=74&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/12/10/may-12th-top-reasons-your-css-columns-are-messed-up/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>

		<media:content url="http://warpspire.com/images/posts/css-column-tricks/ie6doublefloat.gif" medium="image" />

		<media:content url="http://warpspire.com/images/posts/css-column-tricks/extendingcolumns.gif" medium="image" />

		<media:content url="http://warpspire.com/images/posts/css-column-tricks/negativemargin.gif" medium="image" />
	</item>
		<item>
		<title>9 Information Design Tips to Make You a Better Web Designer</title>
		<link>http://csscircle.wordpress.com/2008/12/05/9-information-design-tips-to-make-you-a-better-web-designer/</link>
		<comments>http://csscircle.wordpress.com/2008/12/05/9-information-design-tips-to-make-you-a-better-web-designer/#comments</comments>
		<pubDate>Fri, 05 Dec 2008 17:07:40 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css tricks]]></category>
		<category><![CDATA[Design Tips]]></category>
		<category><![CDATA[Photoshop to XHTML and CSS]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=68</guid>
		<description><![CDATA[9 Information Design Tips to Make You a Better Web Designer
Dec 3rd in Articles by Collis

It&#8217;s probably the least glamourous part of web design, but information design is by no means the least important. Locating and consuming information is the quintessential web task, far surpassing buying, playing and communicating, all of which include a good [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=68&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/12/05/9-information-design-tips-to-make-you-a-better-web-designer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>

		<media:content url="http://www.gravatar.com/avatar/20d41eed9c1ad83ca8ca7f88f19c74bf?s=80&#38;d=http%3A%2F%2Fpsdtuts.s3.amazonaws.com%2FMisc%2Fwriter_psdtuts.jpg&#38;r=G" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/03_3_Parts/diagram.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/1.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/2.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/3.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/4.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/5.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/6.jpg" medium="image" />

		<media:content url="http://www.assoc-amazon.com/e/ir?t=north0c-20&#38;l=as2&#38;o=1&#38;a=0321344758" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/7.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/06_Information_Tips/8.jpg" medium="image" />

		<media:content url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/01_Intro%20to%20WDW/WDW_200.jpg" medium="image" />
	</item>
		<item>
		<title>How to add a Favicon to your Website/Blog</title>
		<link>http://csscircle.wordpress.com/2008/10/25/how-to-add-a-favicon-to-your-websiteblog/</link>
		<comments>http://csscircle.wordpress.com/2008/10/25/how-to-add-a-favicon-to-your-websiteblog/#comments</comments>
		<pubDate>Sat, 25 Oct 2008 08:47:15 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=57</guid>
		<description><![CDATA[
If you have Photoshop knowledge, you can make your own icon image. Start with a 64&#215;64 image and after you&#8217;ve finished your creation, resize it down to 16&#215;16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.
Download Photoshop .ico file format. Right-click [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=57&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/10/25/how-to-add-a-favicon-to-your-websiteblog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/10135/xmas_tree.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/xmas_stocking.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/xmas_gift.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/Xmas_bow.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/xmas_ball.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/Xmas-leaf.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/rudolph2.gif" medium="image" />

		<media:content url="http://www.webdesign.org/img_articles/10135/candy.gif" medium="image" />
	</item>
		<item>
		<title>Horizontal And Vertical Centering</title>
		<link>http://csscircle.wordpress.com/2008/10/25/horizontal-and-vertical-centering/</link>
		<comments>http://csscircle.wordpress.com/2008/10/25/horizontal-and-vertical-centering/#comments</comments>
		<pubDate>Sat, 25 Oct 2008 08:45:54 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>
		<category><![CDATA[Horizontal And Vertical Centering]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=60</guid>
		<description><![CDATA[I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.
We start off by using an [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=60&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/10/25/horizontal-and-vertical-centering/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>
	</item>
		<item>
		<title>From Photoshop to XHTML and CSS</title>
		<link>http://csscircle.wordpress.com/2008/10/04/from-photoshop-to-xhtml-and-css/</link>
		<comments>http://csscircle.wordpress.com/2008/10/04/from-photoshop-to-xhtml-and-css/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 10:44:53 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>
		<category><![CDATA[Photoshop to XHTML and CSS]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=55</guid>
		<description><![CDATA[Welcome everyone, to another long yet humourous tutorial from me! This one is going to take you through every nook and cranny of taking a lovely, glossy layout from Photoshop and putting it into a webpage with no tables, valid XHTML and CSS.
Here&#8217;s the one we&#8217;re going to be working with today, and later on [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=55&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/10/04/from-photoshop-to-xhtml-and-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_1.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_2.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/3.jpg" medium="image">
			<media:title type="html">image 3</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_4.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_5.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_6.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/7.jpg" medium="image">
			<media:title type="html">image 7</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_8.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/9.jpg" medium="image">
			<media:title type="html">image 9</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_10.jpg" medium="image">
			<media:title type="html">image 10</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_11.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/_12.jpg" medium="image">
			<media:title type="html">Click to enlarge</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/11121/13.gif" medium="image">
			<media:title type="html">image 13</media:title>
		</media:content>
	</item>
		<item>
		<title>How to Assign Custom List Bullets with CSS</title>
		<link>http://csscircle.wordpress.com/2008/10/04/how-to-assign-custom-list-bullets-with-css/</link>
		<comments>http://csscircle.wordpress.com/2008/10/04/how-to-assign-custom-list-bullets-with-css/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 10:42:05 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css advanced list]]></category>
		<category><![CDATA[css list]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=53</guid>
		<description><![CDATA[
 1. In your html page embed link to your css file:



&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Test Document&#60;/title&#62;
&#60;link href=&#8221;styles.css&#8221; rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221;&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;/body&#62;
&#60;/html&#62;



 2. Create your bulleted list. Here is ours:



&#60;p&#62;Most popular apple varieties in New England today:&#60;/p&#62;
&#60;ul&#62;
&#60;li&#62;McIntosh&#60;/li&#62;
&#60;li&#62;Cortland&#60;/li&#62;
&#60;li&#62;Red Delicious&#60;/li&#62;
&#60;li&#62;Empire&#60;/li&#62;
&#60;li&#62;Rome&#60;/li&#62;
&#60;/ul&#62;




 3. In css file we will redefine &#60;li&#62; tag. Let’s change these default bullets to our custom bullets.



li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}




 4. Format [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=53&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/10/04/how-to-assign-custom-list-bullets-with-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/12817/tut_custombullet1.gif" medium="image">
			<media:title type="html">image 1</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/12817/tut_custombullet2.gif" medium="image">
			<media:title type="html">image 2</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/12817/tut_custombullet3.gif" medium="image">
			<media:title type="html">image 3</media:title>
		</media:content>

		<media:content url="http://www.webdesign.org/img_articles/12817/tut_custombullet4.gif" medium="image">
			<media:title type="html">Final Result</media:title>
		</media:content>
	</item>
		<item>
		<title>CSS Background Rollover</title>
		<link>http://csscircle.wordpress.com/2008/10/04/css-background-rollover/</link>
		<comments>http://csscircle.wordpress.com/2008/10/04/css-background-rollover/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 10:41:17 +0000</pubDate>
		<dc:creator>siddesigner</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css tips]]></category>
		<category><![CDATA[css tricks]]></category>

		<guid isPermaLink="false">http://csscircle.wordpress.com/?p=51</guid>
		<description><![CDATA[Looking to add a little style to your image links? Let&#8217;s use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we&#8217;ll be looking at adding this style to affiliate buttons.
 Step 1 
First, we have the html [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=csscircle.wordpress.com&blog=4330425&post=51&subd=csscircle&ref=&feed=1" />]]></description>
		<wfw:commentRss>http://csscircle.wordpress.com/2008/10/04/css-background-rollover/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/9762354ed8cd3d054cc0b34675c4f34e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">siddesigner</media:title>
		</media:content>
	</item>
	</channel>
</rss>