Grey box appears over custom css

  • Profile Image
    Nate Held
    Asked on June 13, 2012 at 03:30 PM

    I successfully added an image as the "Submit" button and injected CSS to achieve a hover image as directed in this post:

    http://www.jotform.com/answers/24256-Added-my-own-form-button-and-it-works-great-but-there-is-no-rollover-action

    It worked very well, but two problems have occured.

     

    1. The first time you move your cursor over the button, a grey box quickly appears over the button and then disappears. After the first hover, it works correctly. Im trying to eliminate the grey box that flashes on the first hover attempt.

    2. When viewing this same form on a windows computer with internet Explorer version 9.0.8112.16421, the "Submit" button appears twice. On Firefox and other browsers on the windows computer it only appears once. Only one button appears on all browsers on a Mac. 

     

    Screen shot of double buttons attached.

     

    Any help would be greatly appreciated.

  • Profile Image
    jonathan
    Answered on June 13, 2012 at 07:33 PM

    Hi,

    I did some test on this and I was able to overcome the "grey" effect by including the specific background color for the button in the injected CSS.. my code is like this.

    .form-submit-button{

    background-color: #fff;

    background-image:url(

    http://imavex.vo.llnwd.net/o18/clients/helios/images/Buttons/Submit_button.jpg);

    border: medium none;

    height: 42px;

    width: 142px;

    }

    .form-submit-button:hover {

    background-color: #fff;

    background-image:url(

    http://imavex.vo.llnwd.net/o18/clients/helios/images/Buttons/Submit_button_hover.jpg);

    }

    However, I cannot overcome the view incompatibility issue with IE9. The form display fine in chrome, FF, & Safari, IE 7...
    What is noticeable though is, if I set the IE9 compatibility view to On, it will now display correctly.
    I hope this information helps in addressing your case already.
    Alternatively, we can try re-designing the form to overcome the issue. If we look back at the sample provided by my colleague Neil in the link you provided, his sample form work as is in IE9 with the roll-over effects all intact.
    Please inform us if further assistance is needed. 
    Thanks.
  • Profile Image
    idarktech
    Answered on June 13, 2012 at 08:06 PM

    Hi,

    In addition to Jonathan, I've compiled your background images into a single image and then use background-position to only show the desired part of the image on an element. This is to optimize the performance of the page.

    Image:

    CSS Code:

    .form-submit-button{

    background:transparent url('https://cms.jotform.com/uploads/image_upload/image_upload/global/7231_button.png')0 2px no-repeat;

    border:none;

    height: 31px;

    width: 130px;

    }

    .form-submit-button:hover {

    background:transparent url('https://cms.jotform.com/uploads/image_upload/image_upload/global/7231_button.png')0 -26px no-repeat;

    }

    Demo: 

    http://form.jotform.me/form/21647264178459?

    Hope this helps. Thanks!