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.

IE7 formatting problem

  1. digitalnordic
    Member

    This form (http://silversagecenter.com/silver-sage-center-for-family-medicine/new-patients/silver-sage-center-new-patient-form/) looks fine except in IE7 where the spacing is wrong for halves and thirds and in the top part of the form the right column titles are cut off. I have added a separate stylesheet for IE7 and have tried removing the sidebar and changing the container widths but I can't figure it out. I would appreciate any help. Thanks!

    Posted 8 years ago on Saturday September 3, 2011 | Permalink
  2. Yeah, You've got some big formatting issues there. It looks like there's more going on that just your form formatting.. I don't see your right sidebar at all in IE7.

    Here's the deal. The Ready Classes are just simple helper CSS rules and they're not bulletproof by any means. There are reasonable limits to how they're laid out. If you start combining "thirds" and "halves" in odd ways things aren't going to or align properly in any browser. You're mixing fields that vary in height - some taller than their floated counterparts and this typically results in "hanging" floated elements.

    So, I'm going to be honest with you. I would rethink the layout of the first section. Not just for proper formatting, but for usability. In my experienced opinion, the first section is a usability nightmare.

    current screenshot: http://i.imgur.com/ge8gb.png

    Your eye tracks all over the place and there isn't any real flow. I'm sure you're trying to conserve vertical space, but by now I would agree that most people know how to scroll a little bit to get to what they need. It's more important that they can easily scan and complete your form than trying to cram everything into a small space. Honestly, if I encountered this form, I would abandon it completely.

    I would propose something more like this.

    screenshot: http://i.imgur.com/siKio.png

    By re-arranging a couple of the fields in the editor and applying the Ready Classes in a logical fashion ( also using the "gf_list_inline" class for the radio buttons ), the form formats properly and becomes something that's usually usable. I copied your form page, changed the class names in the markup and you can see my test page here:

    http://bit.ly/qmyPFo

    You'll also see that it actually formats properly in IE7 ( although your sidebar still goes missing )

    screenshot: http://i.imgur.com/vZHDL.png

    Okay, so that said, you're probably going to have to change your strategy here to get the formatting under control. I'm not going to be able to give you any IE7-specific fix. If you're stuck, we would always be happy to recommend a professional developer to help you out moving forward.

    Posted 8 years ago on Tuesday September 6, 2011 | Permalink
  3. digitalnordic
    Member

    Thanks Kevin. I did not realize that I should not use both halves and thirds. As for the sidebar, I had removed it for IE7. I got rid of the thirds and added the sidebar back. Thanks for your help and especially for your formatting advice.

    Posted 8 years ago on Tuesday September 6, 2011 | Permalink
  4. No worries. I think you were on the right track with using the classes and trying to compact the form & make better use of the space, it's just that the way the classes for thirds and halves are defined, they're not really meant to be used in conjunction with each other like that. The rest of the form looked really great, just that first section got a little wonky.

    Let us know if you get stuck on anything else and I'll be happy to help any way I can.

    Posted 8 years ago on Tuesday September 6, 2011 | Permalink

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