https://legacy.forums.gravityhelp.com/topic/browser-display-variations Gravity Support Forums Topic: Browser display variations en-US Tue, 28 Apr 2026 20:09:27 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/browser-display-variations#post-33571 Thu, 25 Aug 2011 16:10:03 +0000 Kevin Flahaut 33571@https://legacy.forums.gravityhelp.com/ <p>Cool. Thanks for the update.</p> <p>Edit: We've decided to add a browser class to the form wrapper for the 1.6 version so you'll be able to use that for browser-specific styles in the future. No need to add the other script to use that with Gravity Forms now. </p> https://legacy.forums.gravityhelp.com/topic/browser-display-variations#post-33570 Thu, 25 Aug 2011 16:04:59 +0000 Colinz 33570@https://legacy.forums.gravityhelp.com/ <p>Thank you very much Kevin, that worked nicely. </p> <p>I'll tuck that browser specific rule format away for another day....very useful.</p> <p>Cheers </p> https://legacy.forums.gravityhelp.com/topic/browser-display-variations#post-33540 Thu, 25 Aug 2011 10:09:52 +0000 Kevin Flahaut 33540@https://legacy.forums.gravityhelp.com/ <p>Yep, padding and margins are rendered differently by all the browsers. It's difficult to get everything "spot on" in all the browsers without a few tricks. You will most likely need to define a height on the input.</p> <pre><code>body #gform_wrapper_1.gform_wrapper input[type=text] { height:20px }</code></pre> <p> screenshot: <a href="http://bit.ly/oM7cEO" rel="nofollow">http://bit.ly/oM7cEO</a></p> <p>You'll probably need to add some chrome/safari-specific hacks to the CSS to apply different values to different browsers. If you do a quick Google search, you'll find several methods to do this.</p> <p>I personally prefer to use this "browser class" snippet added to my WordPress functions file. It appends a browser class to the body element and lets you apply different rules based on inheritance from the body class. That allows you to avoid "hacks" or invalid CSS if that's important to you.</p> <p><a href="http://www.wprecipes.com/how-to-detect-the-visitor-browser-within-wordpress" rel="nofollow">http://www.wprecipes.com/how-to-detect-the-visitor-browser-within-wordpress</a></p> <p><a href="http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/" rel="nofollow">http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/</a></p> <p>If you're using that, you could define different values per browser like this..</p> <pre><code>[css] /* general rule */ body #gform_wrapper_1.gform_wrapper input[type=text] { height:18px } /* safari-specific rule */ body.safari #gform_wrapper_1.gform_wrapper input[type=text] { height:20px } /* chrome-specific rule */ body.chrome #gform_wrapper_1.gform_wrapper input[type=text] { height:24px }</code></pre> https://legacy.forums.gravityhelp.com/topic/browser-display-variations#post-33515 Thu, 25 Aug 2011 00:50:45 +0000 Colinz 33515@https://legacy.forums.gravityhelp.com/ <p>I recently added an email field to a new sites home page and support assisted in formatting. However, having tweaked the field to look satisfactory, l now see that in Chrome and Safari the field box is thicker (as in height) than when viewed in Firefox, making the layout look wrong.</p> <p>Can anyone offer any guidance, please?</p> <p><a href="http://www.foxyladynelson.co.nz/" rel="nofollow">http://www.foxyladynelson.co.nz/</a></p> <p>Cheers<br /> Colin </p>