Question

I’m working on creating an HTML form that has an image in the background. Currently, it only lines up correctly in certain browsers, and in others it is only a few pixels off.

I thought that the following CSS would solve my problem, it helped, but it did not fix the problem.

input {
width: 105px;    
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    
-moz-box-sizing: border-box;    /* Firefox, other Gecko */    
box-sizing: border-box;         /* Opera/IE 8+ */ 
} 

Additionally, all the form inputs are floated and positioned with margins.

Answer 1

If the image is a static size, you might consider setting it as the background of a container with position:relative; and then use position:absolute; with top:, left:, right: and bottom: for positioning and sizing.