<?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>Expressing IT &#187; CSS Resets</title>
	<atom:link href="http://developer.expressionz.in/blogs/tag/css-resets/feed/" rel="self" type="application/rss+xml" />
	<link>http://developer.expressionz.in/blogs</link>
	<description>User Interface : just another, but a serious developers weblog</description>
	<lastBuildDate>Thu, 20 May 2010 18:05:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS2.1 User Agent Style Sheet Defaults</title>
		<link>http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/</link>
		<comments>http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 05:11:58 +0000</pubDate>
		<dc:creator>Nikhil</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[User Interface Desgin]]></category>
		<category><![CDATA[Web Developer]]></category>
		<category><![CDATA[CSS Resets]]></category>

		<guid isPermaLink="false">http://developer.expressionz.in/blogs/?p=149</guid>
		<description><![CDATA[Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome... I thought of digging a bit deeper into the area of  User Agent Style Sheets ...]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: left; margin-right: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2009%2F07%2F28%2Fcss21-user-agent-style-sheet-defaults%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2009%2F07%2F28%2Fcss21-user-agent-style-sheet-defaults%2F&amp;source=nikhild&amp;style=normal&amp;hashtags=CSS+Resets" height="61" width="50" /><br />
			</a>
		</div>
<p>Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome&#8230; I thought of digging a bit deeper into the area of  <strong>User Agent Style Sheets &#8230;</strong><br />
Found this table on default values of CSS2.1 User Agent Style Sheets &#8230; ( for those unaware of what &#8220;User Agent Style Sheets&#8221; is follow <strong><a href="http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/">What is User Agent Style Sheets (Specification)</a> .<br />
</strong></p>
<p><strong>For a full list of CSS 2.1 User Agent Style Sheets  defaults </strong><a href="http://developer.expressionz.in/downloads/CSS21_User_Agent_Style_Sheet_Defaults.html" target="_blank"><strong>click here </strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>User Agent Style Sheets : Mystery Margins in Google Chrome</title>
		<link>http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/</link>
		<comments>http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/#comments</comments>
		<pubDate>Mon, 27 Jul 2009 05:01:22 +0000</pubDate>
		<dc:creator>Nikhil</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[User Interface Desgin]]></category>
		<category><![CDATA[Web Developer]]></category>
		<category><![CDATA[Browser Quirks]]></category>
		<category><![CDATA[Chrome Fixes]]></category>
		<category><![CDATA[CSS Resets]]></category>
		<category><![CDATA[Google Chrome]]></category>

		<guid isPermaLink="false">http://developer.expressionz.in/blogs/?p=146</guid>
		<description><![CDATA[Extra margins seen only in Google Chrome : caused by the user agent stylesheet (-webkit-padding-start:40px)]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: left; margin-right: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2009%2F07%2F27%2Fuser-agent-style-sheets-mystry-margins-in-google-chrome%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2009%2F07%2F27%2Fuser-agent-style-sheets-mystry-margins-in-google-chrome%2F&amp;source=nikhild&amp;style=normal&amp;hashtags=Browser+Quirks,Chrome+Fixes,CSS+Resets,Google+Chrome" height="61" width="50" /><br />
			</a>
		</div>
<p>Yesterday,  like every other &#8220;Ground Hog  Day&#8221; ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe&#8230;</p>
<p>Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet<strong><em> (-webkit-padding-start:40px)</em></strong>.  So the solution was to reset this style by setting padding:0 the misbehaving elements .<br />
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows</p>
<p><strong><em>*{ margin:0; padding:0; }</em></strong></p>
<p><strong>What is User Agent Style Sheets (Specification) ?</strong><br />
<em> The following  excerpt is taken  from </em><a href="http://meiert.com/en/blog/20070922/user-agent-style-sheets/"><em>http://meiert.com/en/blog/20070922/user-agent-style-sheets/</em></a><em> , follow link to read more on User Agent Style Sheets</em></p>
<p>CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.</p>
<p>Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.</p>
]]></content:encoded>
			<wfw:commentRss>http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>What are CSS Resets?</title>
		<link>http://developer.expressionz.in/blogs/2008/03/11/what-are-css-resets/</link>
		<comments>http://developer.expressionz.in/blogs/2008/03/11/what-are-css-resets/#comments</comments>
		<pubDate>Mon, 10 Mar 2008 19:40:56 +0000</pubDate>
		<dc:creator>Nikhil</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS Resets]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://developer.expressionz.in/blogs/?p=27</guid>
		<description><![CDATA[
			
				
			
		
A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.
We all  have been the through the nightmares of writing cross-browser CSS&#8217;s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: left; margin-right: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2008%2F03%2F11%2Fwhat-are-css-resets%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fdeveloper.expressionz.in%2Fblogs%2F2008%2F03%2F11%2Fwhat-are-css-resets%2F&amp;source=nikhild&amp;style=normal&amp;hashtags=CSS,CSS+Resets,Tips+%26amp%3B+Tricks,Tutorials" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.</strong></p>
<p>We all  have been the through the nightmares of writing cross-browser CSS&#8217;s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base  to start building your  upon.</p>
<p>The CSS resets that I normally tend to use looks like this</p>
<blockquote><p><code>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {<br />
margin:0;<br />
padding:0;<br />
}<br />
html {font-size: 76%;}<br />
table {<br />
border-collapse:collapse;<br />
border-spacing:0;<br />
}<br />
fieldset, img {<br />
border:0;<br />
}</code></p>
<p>ol, ul {<br />
list-style:none;<br />
}</p>
<p>h1, h2, h3, h4, h5, h6 {<br />
font-size:100%;<br />
font-weight:normal;<br />
}</p></blockquote>
<p><strong><br />
Reset the browser font size</strong><br />
Also note the reset that has been applied to browser font size in the following line &#8230;</p>
<blockquote><p><code>html {font-size: 76%;}</code></p></blockquote>
<p>The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)<br />
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels&#8230;</p>
<blockquote><p><code>span {font-size: 1em;}<br />
p {font-size: 1.4em;}</code></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://developer.expressionz.in/blogs/2008/03/11/what-are-css-resets/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
