I have a form I am making and the difference in sizes between IE and Firefox is driving me mad.

Basically there is a radio button to the left with a text description on the right. Under these are text fields. All these are fine. The bottom line however has three fields (city, state, zip) going from left to right, not stacked.

The right end of the last field needs to be in line with the fields above it, but no matter what the size of the input tag or font, the side will not match in the browsers.

If I get Firefox to line up, then IE is too big. If I get IE to line up, then Firefox is way too short.

Firefox:

IE:

What can I do to make these match?

Thanks in advance for your help.
Cy

Can you post the code or a url?

Not terribly elegant, but the following might be a start:

I haven't actually tried it. You may have to play with styles to get border/rule consistency between IE and FF.

I CSS to work for me when it came to defining the widths of the fields. Because I used tables all the radio buttons aligned correctly, though I am certain if I had more time I could have achieved it all in CSS.

The best CSS property that I have found that keeps the table looking clean is "vertical-align". I place this on the fields and they clean up the layout.

Defining the width of each field allowed all the fields to end at the appropriate position.

Thanks for all the suggestions.

Cy