<?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 Web Design</title>
	<atom:link href="http://kristinlbradley.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://kristinlbradley.wordpress.com</link>
	<description>Kristin Bradley&#039;s blog on web coding techniques and design</description>
	<lastBuildDate>Fri, 24 Feb 2012 10:41:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='kristinlbradley.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>CSS Web Design</title>
		<link>http://kristinlbradley.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://kristinlbradley.wordpress.com/osd.xml" title="CSS Web Design" />
	<atom:link rel='hub' href='http://kristinlbradley.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Unobtrusive jQuery Popups</title>
		<link>http://kristinlbradley.wordpress.com/2011/10/13/unobtrusive-jquery-popups/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/10/13/unobtrusive-jquery-popups/#comments</comments>
		<pubDate>Thu, 13 Oct 2011 21:14:35 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=141</guid>
		<description><![CDATA[A technique for creating accessible popups using simple semantic HTML and unobtrusive jQuery code. Advantages Popup content is still accessible when JavaScript is disabled. Popup content is separate from main HTML document which makes adding new popups and linking from multiple pages simple. Easy to use. Doesn’t rely on special classes, IDs or inline JavaScript [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=141&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/10/13/unobtrusive-jquery-popups/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Expandable Content with jQuery and HTML5 Data Attribute</title>
		<link>http://kristinlbradley.wordpress.com/2011/10/07/expandable-content-with-jquery-and-html5-data-attribute/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/10/07/expandable-content-with-jquery-and-html5-data-attribute/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 07:38:45 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=133</guid>
		<description><![CDATA[Using jQuery together with the new HTML5 data attribute and a bit of CSS you can create nice expandable / collapsible content items. This is useful for things such as lists of FAQ questions and answers in order to save space. HTML Structure: &#60;div class=&#34;toggle-unit&#34;&#62; &#60;h2 class=&#34;toggle-control&#34; data-text=&#34;What is the answer?&#34; data-expanded-text=&#34;You&#039;ve found it!&#34;&#62;What is [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=133&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/10/07/expandable-content-with-jquery-and-html5-data-attribute/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Cross-browser CSS: Justified Block List</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justified-block-list/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justified-block-list/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 06:20:52 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=123</guid>
		<description><![CDATA[A cross-browser method using semantic markup and CSS to align list items horizontally and space them evenly so they are distributed across the full available width. Useful for laying out lists of thumbnail images or navigation links for example. Tested in IE6, IE7, IE8, FF, Safari, Chrome Fixed Width Content Using This Method: Variable Width [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=123&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justified-block-list/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>

		<media:content url="http://kristinbradley.com/images/blog/justified-block-fixed.png" medium="image" />

		<media:content url="http://kristinbradley.com/images/blog/justified-block-variable.png" medium="image" />
	</item>
		<item>
		<title>Cross-browser CSS: Justify last line of text in a paragraph</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 06:13:44 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=117</guid>
		<description><![CDATA[Normally if you use CSS to justify text, the last line of text is aligned left rather than justified as on other lines. This is the desired behavior in most instances but for some layouts you may want to justify the last line as text as well. Following is a cross-browser method you can use [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=117&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>

		<media:content url="http://www.kristinbradley.com/images/blog/justified-text.png" medium="image" />
	</item>
		<item>
		<title>An Experiment: WIRED on iPad, Recreated in HTML5 &amp; CSS3</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/experiment-wired-on-ipad-html5-css3/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/experiment-wired-on-ipad-html5-css3/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 06:06:12 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=114</guid>
		<description><![CDATA[In May 2010, WIRED released the iPad edition of WIRED magazine. Currently each edition is produced using Adobe InDesign. I decided to see if I could re-create a few of the page layouts from the “iPad Edition Free Preview” included with WIRED’s app using semantic HTML5 and CSS3. So far I have re-created the “From [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=114&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/experiment-wired-on-ipad-html5-css3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>

		<media:content url="http://www.kristinbradley.com/wired/images/screenshot-horizontal.jpg" medium="image">
			<media:title type="html">horizontal view</media:title>
		</media:content>

		<media:content url="http://www.kristinbradley.com/wired/images/screenshot-vertical.jpg" medium="image">
			<media:title type="html">vertical view</media:title>
		</media:content>
	</item>
		<item>
		<title>Printing Table Headers on Every Page</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/print-table-headers-on-every-page/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/print-table-headers-on-every-page/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:57:41 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=107</guid>
		<description><![CDATA[I recently researched how to print table headers on every page for long html tables spanning multiple pages. Following are my findings. Results of Table Printing Tests (Tested in IE7, Firefox 3, Chrome 12, Safari 5 and Opera 11.) Firefox prints table headers on each page automatically as long as table is formatted with th [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=107&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/print-table-headers-on-every-page/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Basic Git Commands</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/basic-git-commands/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/basic-git-commands/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:51:57 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=99</guid>
		<description><![CDATA[Basic Git commands to get you started if you are just starting to use Git for version control. Conventions: • Commands you should type into your terminal window are in the Courier New font. • Underlined text is just an example, replace with what’s relevant to what you want to do. The Absolute Basic Commands [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=99&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/basic-git-commands/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Easy Button Rollovers</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/easy-button-rollovers/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/easy-button-rollovers/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:38:58 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=95</guid>
		<description><![CDATA[A quick and easy cross-browser rollover effect for buttons. (Hover style will only work on links not on inputs for IE6.) HTML: &#60;a href=&#34;&#34; class=&#34;button&#34;&#62;Go!&#60;/a&#62; &#60;input class=&#34;buttons&#34; type=&#34;submit&#34; value=&#34;Submit&#34;&#62; CSS: /* Sample Button Styles */ .button {background: blue; border: 1px outset; color: white; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; padding: 4px 8px;} /* [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=95&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/easy-button-rollovers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Structuring HTML and CSS to Make your Site “Skinnable”</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/skinnable-site-html-css-structure/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/skinnable-site-html-css-structure/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:28:12 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=91</guid>
		<description><![CDATA[Basic Tips Underlying HTML code structure should be semantic and clean. Look for repeated patterns, identify standard chunks of content by similar function and structure. Standardize HTML tags and class names used for these elements. Think in terms of basic reusable building blocks. Try to keep HTML structure and CSS naming schemes semantically-based but include [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=91&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/skinnable-site-html-css-structure/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
		<item>
		<title>Facebook Tab Design Best Practices</title>
		<link>http://kristinlbradley.wordpress.com/2011/09/15/facebook-tab-design-best-practices/</link>
		<comments>http://kristinlbradley.wordpress.com/2011/09/15/facebook-tab-design-best-practices/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 05:24:21 +0000</pubDate>
		<dc:creator>kristinlbradley</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[facebook]]></category>

		<guid isPermaLink="false">http://kristinlbradley.wordpress.com/?p=85</guid>
		<description><![CDATA[Text/Fonts Use Browser rendered text whenever possible rather than image-based text. Advantages to browser-rendered text: Text is easier to edit and update. Increases usability: users can increase text size if needed, etc. to make it easier for them to read. Can improve search engine accessibility. Browser-safe fonts: See this site for a comprehensive list of [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=kristinlbradley.wordpress.com&amp;blog=27463924&amp;post=85&amp;subd=kristinlbradley&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
		<wfw:commentRss>http://kristinlbradley.wordpress.com/2011/09/15/facebook-tab-design-best-practices/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/835ef4af937a5aec088ba0e611d32a2e?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">kristinlbradley</media:title>
		</media:content>
	</item>
	</channel>
</rss>
