WebWerx
Member
I am having alignment issues when implementing this CSS: gf_left_half & gf_right_half
IE Contact Name 1 & Contact Name 2 should be aligned. They are not: http://cl.ly/image/1J0U1n2P113d
Here is the URL (protected with "longbaycamp"): http://www.longbaycamp.ca/online-registration/
I am baffled as to why this is happening right out of the box.
Any and all suggestions will be appreciated. Must be something in my default stylesheet.
You theme is adding margin and padding to all post ol and ul (lists). Here is where your theme is adding that (around line 500 of http://longbaycamp.wpengine.netdna-cdn.com/wp-content/themes/digitalfarm/style.css ) :
[css]
.post ul, .post ol {
margin: 0 20px 20px 20px;
}
.post ul {
list-style: none;
}
.post ol li{
margin: 0 0 10px 15px;
}You can override that by adding this to your theme's stylesheet:
[css]
body .gform_wrapper div ol li,
body .gform_wrapper div ul li {
padding: 0px;
margin: 0px;
}You may have to target more elements to make it look exactly like you want. I added this and the columns line up properly. It's not related at all to using the CSS Ready Classes of gf_left_half and gf_right_half.
WebWerx
Member
Hey Chris!
Thanks a bunch. It worked: http://cl.ly/image/0H062I243M0z
So it was something in my theme as I suspected. I have been building the form all day.... So troubleshooting CSS is abit difficult. I appreciate the speedy & skilled support.
L :-)
PS I know it wasn't the GF gf_left_half and gf_right_half and figured my theme's CSS was over riding it somewhere along the line. Did you find the issue with FireBug?
I used the Web Developer toolbar and Firefox. I did not need to resort to Firebug this time :-)
Good luck with your forms.
Enjoy.