Form Appearance Problems on Non-default Site Template

Hi-

Trying to switch from BF to CF. I designed a simple Contact Us form in CF on our test default-installation Joomla site and the form looks fine (and CF made it very easy to make). I backed up the form then "restored" it on our production site.

The form functions, but doesn't look correct. As a test, I changed the production site's template to rhuk_milkyway (for just a moment!) and the contact us form DID look correct.

So the problem seems to be the interaction with our template (http://www.joomlajunkie.com/templates/commercial-templates/rational-magic.html).

Here is a screen shot of part of the form with our template: [attachment=1]Screenshot-User-Template.png[/attachment]

Here is a screen shot of part of the form using Joomla's default template: [attachment=0]Screenshot-Default-Template.png[/attachment]

Can you suggest what changes to try with the CF HTML/CSS so that the form looks correct?

Thanks for the help and I appreciate the effort in trying to make CF work on our site.

Hi HNSingh,

It's impossible to diagnose CSS accurately from a screenshot. You'll need to look at the form with a CSS debugger like FireBug in FireFox and work out what is affecting the inputs.

Bob

Thanks GreyHead,

I was hoping that it was just a CF setting so that nothing "custom" would be needed. I do have Firebug so I'll look later today, but I may need some help...

--"GreyBeard"

Using Firebug, I believe this is the section of code to fix:
[attachment=0]Screenshot.png[/attachment]
On the right-hand pane is style1.css. I'm wondering if in .form_element label {
vertical-align:middle; is the problem.

I did change :middle; to :top; but there was no visual change. Maybe the change needs to be in HTML instead?

Any ideas?

Thanks again for the help!

Hi HNSingh,

Could be, the great thing about FireBug is that you can edit the entries and see the result.

Personally, I think that the 1.8em top & bottom margin in the next entry is the more likely cause. Note that this is part of the template and you probably want to over-ride it rather than change it as there may be side-effects elsewhere in the layout.

Bob

You are right, Bob.

When

margin: 1.8em 0;

is changed to

margin: 0em 0;

the text box labels and the text boxes line up like they are supposed to.

So, I've never done a template "over ride". I'm wondering if all it would take is to copy this from our website template

#content blockquote, #content form, label,
#content ul, #content ol, #content dl,
#content fieldset, #content address {
     margin: 0em 0;
}

and paste it into the top of CF's style1.css.

It can't really be that simple, can it?

Hi HNSingh,

That's probably too general. Try .form_element label {margin: 0}

Bob

Thanks Greyhead, your code snippet worked.

I've registered our Chronoforms and now we're "validated".

Thanks for taking the time to help us ChronoPeople out!