Posts Tagged ‘ CSS Resets ’

CSS2.1 User Agent Style Sheet Defaults

Tuesday, July 28th, 2009 By Nikhil

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 …
Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

For a full list of CSS 2.1 User Agent Style Sheets defaults click here

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

User Agent Style Sheets : Mystery Margins in Google Chrome

Monday, July 27th, 2009 By Nikhil

Yesterday,  like every other “Ground Hog  Day” ,  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…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from , follow link to read more on User Agent Style Sheets

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.

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.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

What are CSS Resets?

Tuesday, March 11th, 2008 By Nikhil

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’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.

The CSS resets that I normally tend to use looks like this

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
html {font-size: 76%;}
table {
fieldset, img {

ol, ul {

h1, h2, h3, h4, h5, h6 {

Reset the browser font size

Also note the reset that has been applied to browser font size in the following line …

html {font-size: 76%;}

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)
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…

span {font-size: 1em;}
p {font-size: 1.4em;}

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter