I have created an HTML5 canvas image with some points and I am trying to align div tags and text input tags next to these points.
Unfortunately, browsers are not consistent when it comes to the spacing between each div and input tag.
To address this issue, I managed to find a workaround for the input tags by setting their height using CSS. This has ensured that all input tags have consistent spacing across different browsers. It's quite strange that the default height of input tags varies depending on the browser.
However, I have been struggling to achieve the same level of alignment consistency for my div tags across all browsers.
Here is the CSS hack that worked for achieving consistent spacing between text input tags in all browsers: http://jsfiddle.net/baptx/XcKZj/
On the other hand, the alignment of div tags is still inconsistent across different browsers (set up for Firefox): http://jsfiddle.net/baptx/92gPY/
I am currently using Firefox on Linux and have noticed that the Windows version does not render the margins in the same way. Chrome also disagrees with Linux Firefox, regardless of whether it's running on Linux or Windows. Interestingly, Opera consistently aligns with the Linux Firefox rendering, regardless of the operating system.
Initially, I thought this discrepancy might be due to the web browser engine, with Gecko rendering differently compared to Webkit. However, since even the Windows and Linux versions of Firefox do not agree, there seems to be another underlying cause.
If anyone has any insights into why this issue occurs and how to resolve it specifically with div tags, I would greatly appreciate your suggestions.