How to render same margins for every browser?

Question

I have an HTML5 canvas image where I've drawn some points and I want to align some div tags and text input tags next to the points.

Unfortunately, browsers do not agree with the space between each div and input tags.

I've found a hack for the input tag, by specifying height with CSS. Now input tags have the same space between them for every browsers. It seems the default height of input tags was not the same depending on the browser, very very weird.

I've tried the same thing for my div tags, but I can't get the right alignment for every browsers.

text input tags alignment working with every browsers with CSS hack: http://jsfiddle.net/baptx/XcKZj/

div tags alignment is not the same depending on the browser (configured for Firefox): http://jsfiddle.net/baptx/92gPY/

I'm using Firefox on Linux and I've noticed that Windows version does not render the same margins. Chrome does also not agree with Linux Firefox, when running on Linux or Windows. Opera is great, it always agree with Linux Firefox, running on Linux or Windows.

I first thought, it was due to web browser engine, Gecko rendering differently compared to Webkit, but if Windows and Linux version of Firefox do not agree, it should be something else.

Has anyone and idea where it comes from and how to fix this with div tags?

Answer 1

Why : because the prescribed stylesheet does not prescribe spacings like margins.

The solution : use a CSS reset stylesheet, and explicitly declare your own defaults in your site-wide stylesheet.

Here's a website with some resets: http://www.cssreset.com/

Answer 2

It sounds like you need to include a reset css into your styles. This will help unify (but not completely eliminate) the differences between browsers.

Here are two popular resets:

Eric Meyer's reset

YUI Reset