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.
Can anyone offer any guidance, please?
http://www.foxyladynelson.co.nz/
Cheers
Colin
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.
body #gform_wrapper_1.gform_wrapper input[type=text] {
height:20px
}screenshot: http://bit.ly/oM7cEO
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.
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.
http://www.wprecipes.com/how-to-detect-the-visitor-browser-within-wordpress
http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/
If you're using that, you could define different values per browser like this..
[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
}Cool. Thanks for the update.
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.