Setting aside the train wreck the rest of the site is, what with the illegible color contrasts, fixed width layout, design elements that cannot be made elastic, and absurdly undersized fixed metric (px) fonts... Much less the clearing DIV like it's still 2001 and endless pointless presentational use of classes thanks to bloated rubbish like jQuery, mootools and broken CSS methodology... Setting all that aside...
Form elements do not... well... size consistently cross-browser. You are setting a fixed size on them that can't actually scale properly. Biggest problem is though you are trying to size them from the markup -- and that's so arbitrary across browsers you'll never get it right.
A good first step would be to use ACTUAL semantic markup -- since labels and inputs aren't paragraphs, I don't think the form is a subsection of "Project Management Centre" so H3 is the wrong tag... so on and so forth. So step 1, let's drag that markup kicking and screaming into something well-formed and complete; swinging an axe at the garbage you don't need... maybe using some ID's that make sense instead of the gibberish and hard to follow "MERGE2" -- that don't even match the names?!? Get rid of the non-semantic use of STRONG... the NAME attribute on elements that shouldn't have a name like the input[submit]...
So something like:
<form action="#" method="post" id="specialOffers">
<h2>Submit this form to get special offers...</h2>
<fieldset>
<label for="SO_EMail">Email Address <b>*</b></label>
<div>
<input type="email" name="MERGE0" id="SO_EMail" />
</div>
<label for="SO_firstName">First Name <b>*</b></label>
<div>
<input type="text" name="MERGE1" id="SO_firstName" />
</div>
<label for="SO_lastName">Last Name</label>
<div>
<input type="text" name="MERGE2" id="SO_lastName" />
</div>
</fieldset>
<div class="submitsAndHiddens">
<input type="submit" class="submit" value="Subscribe to list" />
<input type="hidden" name="u" value="08e792fdf4717114b8b27d1d3" />
<input type="hidden" name="id" value="dd331035ce" />
</div>
</form>
Styling the input inside those DIV is a matter of just setting a percentage width in the CSS and centering them with text-align. You'll never be able to get them to have a perfect side-to-side width without ANOTHER wrapping DIV in there, so I say just eye-ball that percentage. At narrower widths it might fall apart, but at that point I'd be stripping the formatting off that outer DIV anyways so it takes less screen space.
/* assumes a reset is in place nulling all padding and margins, and killing fieldset's border */
#specialOffers {
max-width:24em;
margin:1em;
font:normal 100%/150% verdana,helvetica,sans-serif;
}
#specialOffers h2 {
margin-bottom:0.66em;
font:bold 150%/120% verdana,helvetica,sans-serif;
color:#920;
}
#specialOffers fieldset {
padding-bottom:0.25em;
}
#specialOffers fieldset div {
position:relative;
width:100%;
padding:0.5em 0;
margin-bottom:0.5em;
text-align:center;
border:1px solid #666;
background:#EEE;
}
#specialOffers label {
font-weight:bold;
}
#specialOffers label b {
color:#F00;
}
#specialOffers fieldset input {
width:90%;
padding:0.5em;
border:1px solid #999;
}
#specialOffers .submitsAndHiddens input {
padding:0.25em 1em;
color:#FFF;
background:#369;
border:0;
-webkit-border-radius:0.3em;
-moz-border-radius:0.3em;
border-radius:0.3em;
}
That's roughly how I'd go about it.
Of course, this assumes an elastic layout with em's and percentage measurements, with the desire of the layout being at the very least semi-fluid... something you don't actually have which is why my advice would be to pitch that entire train wreck of inaccessible design in the trash, and start over with semantic markup, separation of presentation from content, and semi-fluid elastic responsive design. (yes, all THREE) -- as what you have right now is NOT an accessible design.
... and all those things I just listed are the stepping stones you should have climbed BEFORE making it responsive, since responsive is quite literally just the next step in accessible design.
