I am studying CSS3 and HTML5 and trying to develop a simple homepage. Since I have only Mac interface in my house so I couldn’t check any differences on windows.
But one day, one of my acquaintances told me that there is a pixel difference between browsers which I didn’t know at all. Then I checked my page and it appeared to be wrong.
Even though it was same resolution as I set, Chrome on Mac showed me an appropriate position of several buttons but Chrome on Windows didn’t.
Their position was quite different and ruined the design. How can I fix this problem? or is it normal?
Thanks.
Developing a site that is the same on every combination of operating system and browser is no easy task. It has personally added many hours to my development time trying to fix the issues.
There are several tools out there that try to help you with this task, such as Cross Browser Testing. Or you can manually test it by installing the browsers on your machine. It is also common to use virtual machines to test your website on other platforms. VMware is popular.
Using cross browser libraries can also aid in this. Such as jQuery, which is very popular. This page lists more information on the subject, in general.