Form display problems

All Topics → → Form display problems

I'm a newbie (JUST bought & started using Formidable Pro), and I don't understand why my form looks like junk… The field labels aren't showing up correctly. Whether I configure them to display in the “Top” or “Left” position makes no difference; they are just showing up all over the place, as if they're wrapping weird. 

Please help me understand what I'm doing wrong because it looks pretty cruddy. 

URL is as follows:
http://67.225.190.108/~custera…..age_id=142

Running latest stable version of both WP & Formidable Pro.

TIA for your help! 

Stanman_1,

Your theme css is floating all textareas left. This is why your feilds and labels are appearing messed up. Take a look at line 1 of your form.css and remove the float: left Here is what your form.css line 1 looks like:

#ArticleContent input, #ArticleContent select, #ArticleContent textarea {
    clear: left;
    float: left;
}

Hope this helps,

-Steve

Steve,

 

Thank you for the tip. I'm very new to WP, so please pardon what may sound to you like a silly question, but will using the Settings screen in Formidable Pro's GUI overwrite this manual adjustment in form.css? I purchased a commercial theme for this project, and don't want to have to keep tweaking CSS by hand if I can help it. 

I understand your perdiciment. Your theme has what I would consider crappy CSS.

The Formidable CSS file is rendered after your theme's form.css file so under normal circumstances the settings you select in the formidable GUI should be reflected in your forms. However, your theme has #ArticleContent input in the CSS. Because your theme's css file has a specific div called (#ArticleContent), browsers will  give that styling priority over the more universal/general formidable styling. This is why the float: left; and the width: 250px; are being rendered on the webpage over the formidable CSS. 

There are three ways to fix this, either edit the Theme's form.css file and eliminate the width and float attributes assigned to all inputs(easiest method) or you can edit the Formidable CSS and add a !important on the input classes to force the browser to ignore the form.css junk (not recommended). Your third option, is to create a new css file where you can override the form.css file and the formidable css file. This third option would allow you to leave the formidable and your commercial theme in tact and still make the specific changes to the CSS that need to be made.

 

Hope this helps

Steve

Steve,

 

That helped indeed! Thank you so much! I bought a theme from one of the designers on ThemeForest... It's very "pretty" and does some nifty stuff. Unfortunately however, poor coding practices like this are frustrating when they make themselves known and have to be chased down.

 

Some day I'll stop procrastinating and force myself to take the time to learn CSS well enough to design my own stinking templates. That way I should have an easier time troubleshooting if things go wrong since I wrote the code myself! Either that or I'll hire an employee to do it for me! :)

 

I really appreciate your help dude.

Topic closed.