PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Problem Implementing CSS: gf_left_half & gf_right_half

  1. 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.

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  2. 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.

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  3. 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?

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  4. I used the Web Developer toolbar and Firefox. I did not need to resort to Firebug this time :-)

    Good luck with your forms.

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  5. WebWerx
    Member

    Thanks - Much appreciated!

    Is the Web Developer Toolbar a FF Extension?

    L

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  6. Yes, sorry

    https://addons.mozilla.org/en-US/firefox/addon/web-developer/

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  7. WebWerx
    Member

    Thanks Chris. I can see why you like it. The Forms module alone is pretty neat!

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  8. WebWerx
    Member

    Thanks Chris. I can see why you like it. The Forms module alone is pretty neat!

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink
  9. Enjoy.

    Posted 6 years ago on Tuesday January 15, 2013 | Permalink

This topic has been resolved and has been closed to new replies.