Form within iframe: odd behaviour for input element

Hello, everyone.

I've got a weird issue that has myself and a designer a bit confused.

I'm working on a page that has a form, and within this form is an iframe that contains another form. This iframe form is for file uploads, so you can upload one file after another, over and over, without reloading the whole page.

Both form documents (job.cfm which contains the iframe which src is uploadfile.cfm) are loading the same CSS files.

Upon initial page load, one of the form elements in the iframe (input type="text") is "taller" than the others by 8 pixels. When the form submits and refreshes, that same form element is properly sized.

I tried applying a style to that one element and setting it to the same size as the other elements. Upon initial load, that worked; but when the form submits, the element is now SMALLER than the other elements.

Can someone please explain to me what is going on???

TIA,

Anyone? If you need sample code, I can try to type as much as possible. Copy/paste is not an option, unfortunately.

Here is an example of what I have:

index.cfm:

<link href="{css folder}/form.css" rel="stylesheet" />
<link href="{css folder}/jobs.css" rel="stylesheet" />
<form name="editTask" class="bootstrap">
<input type="text" name="request" id="request" value="" />
<!-- iframe --> <iframe src="upload.cfm" name="uploadFiles" id="uploadFiles">Your browser does not support iframes. Please upgrade your browser.</iframe>
<input type="text" name="comment" id="comment" value="" />
</form>

upload.cfm:

<link href="{css folder}/form.css" rel="stylesheet" />
<link href="{css folder}/jobs.css" rel="stylesheet" />
<form name="uploadFile" class="bootstrap">
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="text" name="fileVersion" id="fileVersion" />
<select name="classification" id="classification"><option value="">Select</option><option value="C">Confidential</option><option value="U">Unclassified</option></select>
</form>

The text input of the iframe has the same border, font color, and background color as the text inputs of the parent document; but when the page first loads, it is 8px "taller" than the text inputs of the parent document.

When the form in the iframe is submit (to itself) and the iframe content reloaded, the iframe text input matches exactly (including height) of the text inputs in the parent document.

Any thoughts on what might be causing this?

Thank you, in advance,

Has ANYone else experienced this issue?

Seriously I dont get on with iFrames, I gave up with my contact page and just styled the PHP page instead. Good luck sorry I couldnt help

Bump. Has anyone had a form element in an iframe that appeared different from other elements upon page load, but then appeared correct when the form was submit?