1

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?

baptx
  • 3,428
  • 6
  • 33
  • 42
  • 4
    Not so much the answer to why, but this is a good reason to use a CSS reset. http://www.cssreset.com – Moin Zaman Jun 12 '12 at 14:07
  • Ok, I learned a new thing thanks to stackoverflow community, CSS reset :) Using Eric Meyer's reset, it will mess up my canvas position http://jsfiddle.net/92gPY/6/ and using Yahoo library, it won't change a thing http://jsfiddle.net/92gPY/7/ Now I've tried to only add Meyer's div reset but the problem is still here http://jsfiddle.net/92gPY/8/ Has somebody a working solution? cc @MoinZaman – baptx Jun 12 '12 at 16:04

2 Answers2

5

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/

Marcin
  • 48,559
  • 18
  • 128
  • 201
  • Thanks but I can't make it work http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx Jun 12 '12 at 16:08
  • 1
    @baptx You're doing it wrong. Include the WHOLE reset stylesheet, then explicitly declare all properties that you require to be non-zero. – Marcin Jun 12 '12 at 18:09
  • Haha thanks everybody it's working now! http://jsfiddle.net/92gPY/26/ Eric Meyer's CSS reset did the trick, I had to set tr & td vertical-align to "top". After this I had to find the good height/margin pixels of div to match the pixels interval I've set when drawing points on canvas image :) Just a question, I've heard that using CSS reset isn't a really good practice because it's removing all styles and some are here to make the webpage look better. Some people say it's better to use a base stylesheet e.g.http://fvsch.com/code/base-stylesheet/ which will only correct style. What do you think? – baptx Jun 12 '12 at 19:53
  • @baptx There is no real difference between the two - both are just a comprehensive stylesheet for all elements. I prefer a reset because then whatever non-zero values are set are set explicitly. – Marcin Jun 12 '12 at 20:06
3

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

digitaldreamer
  • 52,552
  • 5
  • 33
  • 28
  • I've tried both libraries but I can't get a cross-browser solution http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx Jun 12 '12 at 16:10