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.

CSS problems with cross-browser compatibility

  1. I am brand new at CSS at brand new with Gravity Forms. Absolutely love the plug-in though. Thank you!

    I have a temporary page at http://www.highlifegourmet.com

    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.

    Isn't 525 pixels the same on every browser?

    Just from playing around, I managed to get my form field and my submit button exactly where I wanted it, using this code:

    (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.)

    /*---------- 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}
    Posted 13 years ago on Monday February 14, 2011 | Permalink
  2. 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

    http://www.w3schools.com/css/pr_class_visibility.asp

    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.

    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {display:none}

    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.

    I would suggest reading up on positioning with CSS then give it another go. This is always a good place to start.. http://www.w3schools.com

    Posted 13 years ago on Monday February 14, 2011 | Permalink