https://legacy.forums.gravityhelp.com/topic/css-problems-with-cross-browser-compatibility Gravity Support Forums Topic: CSS problems with cross-browser compatibility en-US Sat, 04 Apr 2026 11:47:17 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-problems-with-cross-browser-compatibility#post-18471 Mon, 14 Feb 2011 13:06:35 +0000 Kevin Flahaut 18471@https://legacy.forums.gravityhelp.com/ <p>This isn't really a form issue, just a theme/CSS styling issue.. You should start out by checking your CSS for errors - "show" isn't a valid value for the visibility property</p> <p><a href="http://www.w3schools.com/css/pr_class_visibility.asp" rel="nofollow">http://www.w3schools.com/css/pr_class_visibility.asp</a></p> <p>also, if you want to hide the label, the display property is a better choice than trying to set the label color to transparent. That's not supported in all the browsers.</p> <p><code>body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {display:none}</code></p> <p>That said, if you're absolutely positioning the element, by default it's positioned from the top left corner of the viewport.. that's why it looks different everywhere for you. Rezize your browser window and you'll see that everything else moves, but the form stays stuck at that position. You need to make the containing element (div, span, etc.) posiiton:relative so the form is positioned relative to that rather than the top left corner of the page.</p> <p>I would suggest reading up on positioning with CSS then give it another go. This is always a good place to start.. <a href="http://www.w3schools.com" rel="nofollow">http://www.w3schools.com</a> </p> https://legacy.forums.gravityhelp.com/topic/css-problems-with-cross-browser-compatibility#post-18466 Mon, 14 Feb 2011 11:27:09 +0000 mikegeorge 18466@https://legacy.forums.gravityhelp.com/ <p>I am brand new at CSS at brand new with Gravity Forms. Absolutely love the plug-in though. Thank you!</p> <p>I have a temporary page at <a href="http://www.highlifegourmet.com" rel="nofollow">http://www.highlifegourmet.com</a></p> <p>The problem is, on three different browsers, this looks like three different forms. For example, in IE, the form label is not invisible, as I want it. In Chrome, on my PC, it looks perfect, but on my girlfriend's Mac, running Chrome, it's out of alignment.</p> <p>Isn't 525 pixels the same on every browser?</p> <p>Just from playing around, I managed to get my form field and my submit button exactly where I wanted it, using this code:</p> <p>(and when I say "exactly where I wanted it", I mean "exactly where I wanted it in Google Chrome on a PC running Windows. It's not at all where I want it across the board.)</p> <pre><code>/*---------- LANDING PAGE, form 1-----------------------*/ body .gform_wrapper { width:650px; height:300px; background-image: url(http://highlifegourmet.com/images/mortgage_application.jpg); } /*----submit image----*/ body #gform_wrapper_1 .gform_footer input[type=image] {position:absolute; visibility:show; left: 700px; top: 316px; } body .gform_wrapper ul, body .gform_wrapper li, body .gform_wrapper form li, body .gform_wrapper form ul li { list-style-type:none!important; list-style-image:none!important; background- image:none!important } /*----------- positions the form field, makes it transparent------------*/ body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] { font-size:17px; width:158px; position:absolute; background:transparent; visibility:show; left: 525px; top: 322px;} /*--------------------- gets rid of the label ------------------*/ body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {color:transparent}</code></pre>