User Agent Style Sheets : Mystery Margins in Google Chrome

Nikhil — Mon, 27 Jul 2009 05:01:22 +0000

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

Setting the DOCTYPE in XSL

Nikhil — Sun, 03 Aug 2008 05:28:33 +0000

Last week I created a progessive HTML/CSS layout for a client, tested it in IE6, IE7 and FF 3, seemed perfectly fine… UNTIL! the layout went further down the manufacting cycle. It failed. Page layout elements just went all over the place when the HTML layout was converted into XSL and XML applied to it … Bummer!!!

Could not sleep ok over the weekend, in anticipation of Monday morning, when I’ll have to fix this SH**. But now having a little experince in dealing with these kind of situations ( Browser Quirks, I mean), I knew it had to do with nothing else but DOCTYPE…. and It WAS…

The Problem:
You want control over the DOCTYPE, since your transformation will include a default DOCTYPE explicitly, and you layout will be out for a toss.

The Solution:
XSLT specs provides output methods to set a the DOCTYPE of choise. Also, for us UI developers, the topics of interest would be HTML output methods and XML output methods.

Well! before you get bored , here is the fix.

For eg., if you had the following DOCTYPE in your HTML version :-

Then in the XSL you would have to have the following :-

and Finally! do make sure your XSLT output obeys the DOCTYPE you have chosen.

Expressing IT » Browser Quirks

User Agent Style Sheets : Mystery Margins in Google Chrome

Setting the DOCTYPE in XSL