Forums

Form Upload Code breaking CSS?

bryanmci 15 Apr, 2009
Hi All.

First, thanks to those that have been helping me with my form issues. It's always fun (??) to learn a new product. Once I got the hang of it, ChronoForms is an amazing tool.

Now I'm stuck on an issue with file uploads. I copied the form code from another post, and is as follows:


 <hr>

<h2>Policy Upload</h2>

<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Policy File to Upload: </label>
<input class="cf_fileinput required" size="30" id="autopol" name="autopol" type="file">
</div></div>

<hr>

  <h2>Coverage Notice</h2>


I should mention that these are the only <div> tags within my form. My form is straight HTML copied from our current site. Not sure if this matters or not.

In Firefox, the "Coverage Notice" heading is displayed immediately after the browse button on my form. The horizontal rule is not displayed.

In IE (which the majority of our clients use), the horizontal rule is displayed immediately after the browse button, lining up with the top of the button. The "Coverage Notice" heading is displayed below (and immediately to the right) of the browse button.

This, of course, throws off my header text at the bottom of the form (moves it upwards).

I tried eliminating one </div>, but that just made things go even crazier.

I also attempted to create file upload fields using just plain <input type="text" id="autopol" name="autopol" type="file"> tags. While this seemed to work fine in IE, the browse button and file functionality wouldn't even appear in FF.

Thoughts?!?

Thanks very much in advance!!!

Bryan
GreyHead 16 Apr, 2009
Hi Bryan,

I put this snippet into a new form and the horizontal rule shows up for me in FF3.0 (and in IE).

The ChronoForms Wizard adds an extra div with calss='clear' in though that may make the difference for you.
<hr />

<h2>Policy Upload</h2>

<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 150px;">Policy File to Upload: </label>
    <input class="cf_fileinput required" size="30" id="autopol" name="autopol" type="file">
  <div class='clear'> </div>
  </div>
</div>

<hr />

<h2>Coverage Notice</h2>

Bob
Max_admin 16 Apr, 2009
Hi Bryan,

and you can transform the form to theme1 style to see a different look for it with a different CSS style!

Cheers
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
bryanmci 16 Apr, 2009
Thanks Max and Greyhead.

Max, I've been unable to transform the form, since it wasn't created with the wizard; unless I'm missing something somewhere?

Last night, I just removed the <div class> tags altogether. The upload function works FLAWLESSLY in both IE and FF.
GreyHead 16 Apr, 2009
Hi Bryan,

Glad it's working OK!

I just spotted that this has two types in it - which is probably why FF didn't like it:
<input type="text" id="autopol" name="autopol" type="file">

Bob
This topic is locked and no more replies can be posted.