User Agent Style Sheets : Mystery Margins in Google Chrome
July 27th, 2009 by NikhilYesterday, 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 http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , 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.
Tags: Browser Quirks, Chrome Fixes, CSS Resets, Google Chrome
Subscribe to ExpressingIT by Email
|
Follow Me on Twitter
