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.

Radio buttons and checkboxes in IE8 - still having problems

  1. RichardBest
    Member

    Hi All

    Kevin, I'm afraid I'm still having problems with IE8. I've flicked you an email with an image of what I'm seeing but I think my email account may be playing up in the light of last week's episode.

    If you didn't get it, would you please let me know and I'll resend.

    Many thanks
    Richard

    Posted 13 years ago on Thursday April 14, 2011 | Permalink
  2. Okay. I'll take another look and let you know what I find.

    Posted 13 years ago on Thursday April 14, 2011 | Permalink
  3. RichardBest
    Member

    Thanks very much Kevin. Much appreciated.

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  4. RichardBest
    Member

    Hiya - Do you guys do beer donations (in monetary form via PayPal)? I'd gladly drop you one if you were able to fix this please. Completely understand if you're too busy; I know this is beyond the call. Cheers. Richard.

    Posted 13 years ago on Monday April 18, 2011 | Permalink
  5. Richard, I didn't forget about you, just did get busy with some offline business at the end of the week (taxes - ugh). I'll make a point to look at it this morning and get back to you. Thanks for your patience.

    Posted 13 years ago on Monday April 18, 2011 | Permalink
  6. Richard,

    Your issue is coming from the default canvas stylesheet. Line 547 of the /canvas/style.css file sets a blanket padding rule to all Gravity Forms inputs.

    [css]
    .gform_wrapper input { padding: 7px 3px !important; }

    Since the radio/checkboxes are inputs as well, they inherit this padding so it's throwing the heights off and causing the staggered layout in IE. Since they specified the rule is !important, you'l probably have to use the important declaration on the properties I sent previously.

    [css]
    body .gform_wrapper input[type=radio],
    body .gform_wrapper input[type=checkbox]{
    	padding-top:0!important;
    	padding-bottom:0!important;
    	border-top:none;
    	border-right:none;
    	border-bottom:none;
    	border-left:none
    }

    Any time a theme applies blanket margin/padding rules to inputs it's going to throw off the layout for the list items. It's a shortcut that way too many theme developers take and a common problem.

    The proper way to do this would be target the inputs by their specific types to apply the properties.. example below:

    [css]
    input[type=text],
    input[type=tel],
    input[type=url],
    input[type=number],
    input[type=file],
    input[type=password] {padding:7px 3px}
    Posted 13 years ago on Monday April 18, 2011 | Permalink
  7. RichardBest
    Member

    Brilliant. Thanks so much Kevin. I'll implement this today.

    Thanks again. GF service is unparallelled.

    Richard

    Posted 13 years ago on Monday April 18, 2011 | Permalink
  8. RichardBest
    Member

    P.S. I'd still gladly make the beer/coffee/whatever donation!

    Posted 13 years ago on Monday April 18, 2011 | Permalink
  9. Thanks Richard. I may take you up on the offer later. I'm coffee'd up today and running as fast as I can. Let me know if you need anything else.

    Posted 13 years ago on Monday April 18, 2011 | Permalink

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