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.

Padding Not Working - IE, Firefox

  1. See my form here: http://www.agilebts.com/zoho-crm-test/

    The 10px padding I have in from the background image is not working in IE and Firefox. It does work however in Chrome and Safari. Here is my code:

    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
    }
    
    body .gform_wrapper form {
         background: url('http://www.agilebts.com/wp-content/uploads/2013/01/Green-Form.png');
    ');
        padding: 10px;
          border:0px solid #cccccc;
    border-radius: 10px;
    
            box-shadow:  3px 3px 5px 1px rgba(100, 100, 100, .7);
    
    }
    
    /* make the form container relative for positioning */
    
    body .gform_wrapper {
        position: relative;
    }
    
    /* resize and position the form footer with the button */
    
    body .gform_wrapper .gform_footer {
        width: auto;
        position: relative;
        top: 15px;
        left: 0px;
        padding: 0;
        margin: 0;
    }
    
    .gform_wrapper .gform_body .gform_fields .gfield label {color: #FFFFFF}

    Paul

    Posted 9 years ago on Friday March 1, 2013 | Permalink
  2. David Peralty

    Try putting the !important declaration on it as well and see if that works any better.

    Posted 9 years ago on Friday March 1, 2013 | Permalink
  3. Thanks for your reply! I tried adding that here but I didn't see a change:

    body .gform_wrapper form {
         background: url('http://www.agilebts.com/wp-content/uploads/2013/01/Green-Form.png');
    ');
        padding: 10px !important;
          border:0px solid #cccccc;
    border-radius: 10px;
    
            box-shadow:  3px 3px 5px 1px rgba(100, 100, 100, .7);
    
    }
    Posted 9 years ago on Friday March 1, 2013 | Permalink
  4. David Peralty

    I'll have to point out this to our CSS expert, I'm not sure why it isn't showing correctly.

    Posted 9 years ago on Friday March 1, 2013 | Permalink
  5. Richard Vav
    Administrator

    You need to check your style sheet as the w3c CSS validator is reporting 55 errors.

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.agilebts.com%2Fwp-content%2Fthemes%2Fnevada%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    However in this particular case I think the problem lies with stray code on line 3 of the css shown below, try deleting that line and then test it again in firefox and ie

    body .gform_wrapper form {
         background: url('http://www.agilebts.com/wp-content/uploads/2013/01/Green-Form.png');
    ');
        padding: 10px !important;
          border:0px solid #cccccc;
    border-radius: 10px;
    
            box-shadow:  3px 3px 5px 1px rgba(100, 100, 100, .7);
    
    }
    Posted 9 years ago on Friday March 1, 2013 | Permalink
  6. OK I removed that stray code on line 3 and it fixed the problem. Thank you very much!

    Posted 9 years ago on Friday March 1, 2013 | Permalink
  7. Richard Vav
    Administrator

    Your welcome, small CSS errors normally aren't an issue but as you just experienced each browser takes a different approach to handling them, and it usually is ie that takes the harder line.

    Posted 9 years ago on Friday March 1, 2013 | Permalink

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