Michael
Member
I have a form on http://www.decoridesigns.info/design-inquiry/
When previewing my website in Firefox, it works just fine; but when previewing in Safari, my SUBMIT button is floating above the Comments field. I have tried making adjustments to my button in my theme's style.css with no change and am not sure if there's a spot in form.css to make adjustments to my button.
If someone is able to tell me how to force my button to the end of the form, I would be very grateful.
Thank you
It's the custom CSS you're adding and not a default form style issue.
On line 226 of forms.css file.. you've added styles and floated the comment container (#field_2_13) box above the gform_footer and didn't clear it properly. Probably no need to float that left as it's the default position. I would just remove the float property and that should work for you.
Here's the deal. Don't make edits directly in the plugin's form.css file. If you do, and use the auto-update option, all of your changes will be overwritten.
If you want to make extensive customizations, here's how you do it. Copy the entire forms.css content from the plugin file, then append all of that to your theme's style.css file.
Then, go to the forms settings page select no for the "output CSS" option. That way, the default forms.css won't load, and the styles are coming from your theme style sheet. Make all the changes you want there, then when the plugin updates, your customizations are safe.
Michael
Member
Thanks for your response. What do you mean by "didn't clear it properly"? I took the float: left; away from that line and it moved my comment box to the top and covered up part of my address fields (in both safari and firefox). It did bring the submit button back down though. Any other suggestions?
Also, thanks for mentioning that I had to transfer my css. I intended on doing it, but had not remembered to yet. It is transferred now.
Floating elements with CSS takes a little bit to grasp sometimes but this is a great place to start. It's been around a while, but still should be helpful.
http://css.maxdesign.com.au/floatutorial/
Yeah, your styles are off a little bit. What you need to do is basically float every other element to the left for a two column layout. Float the first one, then the third, then the fifth, etc. The ones in between will naturally float up to the right inline with the previous one assuming there's room enough to do so.
I grabbed your CSS, tweaked it and tested it. I think this should get you closer to what you wanted.
/* custom layout for Design Inquiry form */
#gform_wrapper_2 { width:590px; margin-left:68px; }
/* Name */
#field_2_2 { float:left; width:295px; }
/* Address */
#field_2_18 { float:left; width:590px; }
/* Daytime Phone */
#field_2_10 { float:left; width:295px; }
/* Project Date */
#field_2_16 { float:left; width:295px; padding-top:20px; padding-bottom:120px; }
/* Email */
#field_2_19 { width:269px; padding-right:26px; }
/* Night Phone */
#field_2_12 { width:295px; }
/* Rooms */
#field_2_17 { width:295px; padding-top:20px; }
/* Comments */
#field_2_13 { width:100%; }
/* Dropdown adjustments */
.entry-content .gform_wrapper .ginput_complex select,.entry-content .gform_wrapper select { padding-bottom:2px; padding-left:3px; padding-top:3px; font-size:12px; }Wonderful. Thanks for the update.