I have a website, called link and it looks good in Chrome and Internet Explorer, but in firefox, no .. why can I happen this?
This is what it looks like in Chrome and IE:
And that's how it looks in Firefox:
Also, is there a program that shows compatibility problems or something? I do not know what's wrong.
The problem can be seen even without putting the code in the question: you have a transform: translate(-50%, -50%) that applies well in Chrome and IE, but without the prefix -moz- it will not look good in Firefox.
Within your particular code you have this:
#helloDialog {
width: 400px;
background-color: #FFFFFF;
margin: 10px auto;
padding: 5px 15px 5px 15px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
zoom: 80%;
-moz-transform: scale(0.5, 0.5);
-moz-transform-origin: left center;
}
As you can see, there is a style defined specifically for -moz-transform that is not the translate but the scale and that causes the transformation defined above to be overwritten and the translation of the dialog not be applied and it can be seen poorly positioned.
The solution is simple, you can add multiple transformations separated by commas, so add translate(-50%, -50%) to -moz-transform and problem solved:
#helloDialog {
width: 400px;
background-color: #FFFFFF;
margin: 10px auto;
padding: 5px 15px 5px 15px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
zoom: 80%;
-moz-transform: translate(-50%, -50%), scale(0.5, 0.5);
-moz-transform-origin: left center;
}
This is how I see it after changing that style in the Firefox element inspector:
