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.

Form layout issues in IE6

  1. Hey!

    Can you help figure out why text accompanying names fields are messed up stylistically at
    http://www.thewebeditor.com/contact/

    I use another Gravity Form on this site, and having all sorts of problems with the layout of this one (not just names fields, but the Country field and Zip/Postal Code) - at:

    http://www.thewebeditor.com/subscribe/printed-magazine/

    Thanks for any help you can give me!

    Dave

    Posted 11 years ago on Tuesday March 2, 2010 | Permalink
  2. Dave, we don't officially support IE6 but I did take a look at the forms and it's appears it's the sub-labels in the complex form fields that are causing your display issue.

    You can always use the IE conditional statement to add IE6 specific styles. Just put something like this in your page header, below the wp_head() call.

    <!--[if lte IE 6]>
    
    <style type="text/css">
    .gform_wrapper .ginput_complex label, .gform_wrapper .gfield_time_hour label, .gform_wrapper .gfield_time_minute label, .gform_wrapper .gfield_date_month label, .gform_wrapper .gfield_date_day label, .gform_wrapper .gfield_date_year label, .gform_wrapper .instruction {
    	display:block;
    	font-size:10px;
    	letter-spacing:1px;
    	margin:3px 0 8px;
    }
    </style>
    
    <![endif]-->

    That should get you pointed in the right direction. You can tweak the margins and values from there and add other styles in that block as necessary.

    Posted 11 years ago on Tuesday March 2, 2010 | Permalink
  3. Thanks Kevin.

    It's just the positioning of fields and accompanying text when they sit alongside each other that's the problem in IE6.

    While I'm at it the submit button seems to sit outside the 'form' container itself.

    An example of the form is here:

    http://www.thewebeditor.com/subscribe/

    To save me a heap of time on this could you drop me a note just to tell me how I can change these fields so they align neatly in IE6? I bought a developer license just a few days ago and I'm keen to get this matter resolved asap.

    Thanks!

    Dave

    Posted 11 years ago on Monday March 8, 2010 | Permalink
  4. I understand your desire to get this done but as I mentioned before, we've chosen not to support IE6. The browser was released almost 9 years ago now (August 2001) and it's clearly time to move on and spend our time and effort supporting the newer versions.

    Gravity Forms are tested and supported in IE7 and newer versions of IE.

    I'm sure with the IE conditional statement and some CSS tweaking, you'll be able to overcome the minor display issues.

    Posted 11 years ago on Monday March 8, 2010 | Permalink
  5. Thanks Kevin - on reflection that does make complete sense.

    Appreciate your solid stance. I've been trying to persuade my clients to look away from IE6 now, and will be able to cite your successful expedition away from this antiquated browser as an example of the way ahead!

    Thanks again for your help.

    Dave

    Posted 11 years ago on Monday March 8, 2010 | Permalink
  6. Dave,

    Thanks for your understanding. We're trying to keep moving forward with new features and enhancements and just can't afford the time to support the older browsers. Thanks too for the kind note, it's much appreciated.

    Posted 11 years ago on Monday March 8, 2010 | Permalink
  7. Hi Guys,

    Just a quick note on IE6 layout issues. Rather than tweaking individual elements through conditional statements etc it might be a good idea to try get IE6 to behave correctly by using an alternative IE6 specific style sheet that will target common pitfalls.

    Very handy tool you can paste your forms.css file in to that will fix it up (for the most part):

    http://www.onderhond.com/tools/ie6fixer/

    Posted 11 years ago on Friday May 28, 2010 | Permalink
  8. That's what I referring to previously although I didn't go into detail - not using the conditional comments for individual elements, but using the IE conditional comments in the page template to load an alternate style sheet and/or scripts for IE6 support.

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" media="screen" href="http://yoursite.com/wp-content/themes/themename/css/ie6.css" />
    <![endif]-->

    Thanks for the link

    Posted 11 years ago on Friday May 28, 2010 | Permalink

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