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.

CSS override - ul, li

Gravity Support Forums » Plugin Support » Gravity Forms

  1. btozcreative
    Member

    Can't find a definitive answer to this problem - maybe each fix is case-by-case, but I am hoping there is a "universal" fix since I keep having this problem pop up on every Gravity Form I implement on a website...

    Whether I select Yes or No on the Gravity Forms > Settings > Output CSS option, Gravity Forms always seems to inherit the theme's ul li properties. As a result my forms end up with a bullet on every line, weird spacing, and other various formatting issues.

    Several of these sites are in development and therefore not viewable, but here is an example of the problem on one site:

    http://www.circapintig.com/get-involved/volunteer/
    http://www.circapintig.com/get-involved/donate/
    http://www.circapintig.com/get-involved/audition/
    http://www.circapintig.com/get-involved/submit-a-script/

    I have tried putting the following code into my style sheet:

    [css]
body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li {
list-style-type: none !important;
list-style-image: none !important;
list-style: none !important;
background-image: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}

    But this does not seem to fix anything either.

    I'm surprised this is such a systemic problem for Gravity Forms... it seems to cause errors more often than not for me (basically every theme screws up the forms). What is the solution?

    Posted 11 years ago on Thursday January 24, 2013 | Permalink

  2. Kevin Flahaut
    Administrator

    Gravity Forms is designed to inherit most of it's formatting from your theme. Some things have to be defined to preserve the overall layout, but we've built it in such a way that it can be dropped into most themes and often with no customization, the forms take on the general look and feel of the overall site design. Sometimes a little customization is required to override either poorly designed theme markup/CSS or to override some inheritance issues. There isn't really a "one size fits all" solution when you're incorporating the markup directly into your page. The only way to bulletproof the forms from CSS inheritance would be to iframe them into the page.

    That said, I reviewed all the links you sent in a couple of browsers and I'm not seeing any bullets on your list items.

    http://i.imgur.com/1KYFa9M.jpg

    If you're still having an issue with it, just post back some other examples of the problem and we'll try to help.

    Posted 11 years ago on Thursday January 24, 2013 | Permalink

  3. btozcreative
    Member

    Kevin,

    Thanks for taking the time to respond to my question. I completely understand what you're saying here. Gravity Forms is certainly the "superior designed" product... it is too bad many of these themes I happen to be working with are messing with it.

    Sorry about that. I was so frustrated with the site I sent you example links on that I stayed up for another couple hours working on it. I ended up with a weird custom-class workaround that is probably not the best way to fix it, but it worked...

    I really need to go back to school. My "web programming" knowledge is about 10 years out of date and I'm constantly playing catch up.

    Posted 11 years ago on Thursday January 24, 2013 | Permalink

  4. Rob Harrell
    Member

    No worries - just give a shout if you ever get stuck on anything in the future.

    Posted 11 years ago on Thursday January 24, 2013 | Permalink

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