https://legacy.forums.gravityhelp.com/topic/ie7-formatting-problem Gravity Support Forums Topic: IE7 formatting problem en-US Wed, 15 Apr 2026 06:41:27 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/ie7-formatting-problem#post-34584 Tue, 06 Sep 2011 14:55:04 +0000 Kevin Flahaut 34584@https://legacy.forums.gravityhelp.com/ <p>No worries. I think you were on the right track with using the classes and trying to compact the form &amp; 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.</p> <p>Let us know if you get stuck on anything else and I'll be happy to help any way I can. </p> https://legacy.forums.gravityhelp.com/topic/ie7-formatting-problem#post-34581 Tue, 06 Sep 2011 14:23:26 +0000 digitalnordic 34581@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/ie7-formatting-problem#post-34564 Tue, 06 Sep 2011 11:55:14 +0000 Kevin Flahaut 34564@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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.</p> <p>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.</p> <p>current screenshot: <a href="http://i.imgur.com/ge8gb.png" rel="nofollow">http://i.imgur.com/ge8gb.png</a></p> <p>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.</p> <p>I would propose something more like this.</p> <p>screenshot: <a href="http://i.imgur.com/siKio.png" rel="nofollow">http://i.imgur.com/siKio.png</a></p> <p>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:</p> <p><a href="http://bit.ly/qmyPFo" rel="nofollow">http://bit.ly/qmyPFo</a></p> <p>You'll also see that it actually formats properly in IE7 ( although your sidebar still goes missing )</p> <p>screenshot: <a href="http://i.imgur.com/vZHDL.png" rel="nofollow">http://i.imgur.com/vZHDL.png</a></p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/ie7-formatting-problem#post-34307 Fri, 02 Sep 2011 21:08:29 +0000 digitalnordic 34307@https://legacy.forums.gravityhelp.com/ <p>This form (<a href="http://silversagecenter.com/silver-sage-center-for-family-medicine/new-patients/silver-sage-center-new-patient-form/" rel="nofollow">http://silversagecenter.com/silver-sage-center-for-family-medicine/new-patients/silver-sage-center-new-patient-form/</a>) 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! </p>