How Do I Make Standards Mode Work As Well As Quirks Mode?

The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag) Copy

Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.

input.quirks {
    margin: 1px3px1px0px;  /* 3px right margin */border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).

There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!

Solution 2:

Since your problem was mostly caused by different default values in IE and Firefox, you may be interested in a Reset CSS stylesheet, which includes values for things like padding, effectively clearing the defaults for every browser so that they all render similarly.