Check Box Alignment issues

Yeah, the theme developer applied all sorts of blanket properties to the input element. That's typical of something you get from ThemeForest. The problem is that checkboxes and radio buttons are input elements too so they get the same rules applied as other normal text fields.

That said, you can add this to the end of your theme's stylesheet and it should override the bad CSS.

body .gform_wrapper input[type=checkbox],
body .gform_wrapper input[type=radio] {height:auto}

I noticed your button was really wide too - again inheriting from the blanket rule so this should get it back to normal

body .gform_wrapper input[type=submit],
body .gform_wrapper input[type=image] {width:auto}

I didn't see the blue border you mentioned on the other form, but you could do this to add a blue border the field that's in focus

body .gform_wrapper input[type=text]:focus,
body .gform_wrapper input[type=email]:focus,
body .gform_wrapper input[type=phone]:focus,
body .gform_wrapper input[type=url]:focus,
body .gform_wrapper input[type=password]:focus,
body .gform_wrapper textarea:focus  {border:1px solid #0076a3}

test screenshot: http://grab.by/8j7O

A good resource to learn CSS is http://www.w3schools.com - they break everything down into simple pieces and give good examples. There are tons of others you can find, but that site is well organized and easy to walk through as you learn.

You can search Amazon.com for CSS books by Dan Cederholm, Andy Budd, Cameron Moll or Andy Clarke. All of those guys have published some great CSS resources.

I personally am a Firebug fan. I use it to debug most of the time. The other developer tools are nice for Safari/Chrome, but I simply prefer the workflow in Firebug. Any of them are good choices for inspecting your markup & CSS.

The border-radius property just rounds the corners of the elements. What you're talking about is a "box shadow" which you would add like this.

body .gform_wrapper input[type=text]:focus,
body .gform_wrapper input[type=email]:focus,
body .gform_wrapper input[type=phone]:focus,
body .gform_wrapper input[type=url]:focus,
body .gform_wrapper input[type=password]:focus,
body .gform_wrapper textarea:focus  {border:1px solid #0076a3; -moz-box-shadow: 0px 0px 5px #0076a3; -webkit-box-shadow: 0px 0px 5px #0076a3; box-shadow: 0px 0px 5px #0076a3}

screenshot: http://grab.by/8kaw

Note: This doesn't work in IE browsers, but is a nice effect in browsers that actually try to support web standards.

Here's a little more info on the box-shadow property. The CSS Tricks site is also a good resource for CSS tutorials and snippets as well.

http://css-tricks.com/snippets/css/css-box-shadow/

Fred, sorry for the delay getting back to you, I've been traveling and had some connectivity issues for the past 2 days. All seems well now so I've looked at your form/css and see a couple of things offhand.

First, you've applied the padding rule to just the "focus" state so when you're not focusing on the field, the padding goes back to 0. You can remove that and just do this.

body .gform_wrapper input[type=text],
body .gform_wrapper input[type=email],
body .gform_wrapper input[type=phone],
body .gform_wrapper input[type=url],
body .gform_wrapper input[type=password],
body .gform_wrapper textarea {padding-left:5px;}

That will apply to all of the states of the field.

Next, I see your box-shadow isn't working because your syntax is wrong. There are only 3 numerical values to specify and you have 4 in your rule. These aren't specified the same way as padding/margins are (top - right - bottom - left). If you refer back to my CSS snippet in the previous post, you'll see the proper way to implement the style.

As mentioned before, you can find out more about the box-shadow property and how it's applied here.

http://css-tricks.com/snippets/css/css-box-shadow/

Once you've got that all working again, let me know if you still have issues and we'll take it from there.

Fred, in looking back at the available properties, you are 100% correct about specifying the spread. (Doh! *red face*) My apologies. I'm not sure why it wasn't working before but I've tested it with a couple of other style tweaks and it works fine.

screenshot: http://grab.by/8o7u

try adding this to your stylesheet. You can replace the box-shadow rule with this one as well.

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {overflow: visible}

body .gform_wrapper input[type=text]:focus,
body .gform_wrapper input[type=email]:focus,
body .gform_wrapper input[type=phone]:focus,
body .gform_wrapper input[type=url]:focus,
body .gform_wrapper input[type=password]:focus,
body .gform_wrapper textarea:focus  {border:1px solid #0076a3; -moz-box-shadow: 0 0 3px 2px #0076a3; -webkit-box-shadow: 0 0 3px 2px #0076a3; box-shadow: 0 0 3px 2px #0076a3}

I hope that gets it for you

Great Fred. Thanks for the update.