Space around submit button.

  • Profile Image
    b2bcontact
    Asked on February 22, 2013 at 12:31 PM

    I have no idea why this is happening...  I'm getting white space around my button.  More so in internet explorer than anything else.  Does anyone have a solution.

  • Profile Image
    moonzkie
    Answered on February 22, 2013 at 12:51 PM

    Hi,

    Upon checking the white background around the button is from the button image itself.

    You need to remove the image button background to remove the white background.

    Thank you.

  • Profile Image
    ardy0689
    Answered on February 22, 2013 at 01:07 PM

    Hello after further checking, I opened the submit button image on Photoshop and it shows that the image has a transparent background already. There is nothing wrong with submit button image.

    This is a rendering problem on Internet Explorer and other Trident based browsers as it does not completely support transparent PNGs.

    You can try to insert this and inject the CSS code on the Form styles as this is normally used by most web designers to make IE behave for transparency. Please see if it works. Thanks.

    .form-submit-button img {
        background: transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */  
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */     
        zoom: 1;

    }

  • Profile Image
    b2bcontact
    Answered on February 22, 2013 at 01:48 PM

    Hi thanks for offering a solution.  Unfortunately that did not fix the problem.  Any other ideas?

  • Profile Image
    jefreylandicho
    Answered on February 22, 2013 at 02:10 PM

    Instead of using PNG image file type for you button image, try using a GIF image file type or when saving a PNG image, set the format equal or lower than 24 bit. 

    Internet Explorer doesn't seem to support more than 24bit PNG type images.

  • Profile Image
    EduardoMendez
    Answered on February 22, 2013 at 02:32 PM

    Hi there, 

    To add to the previous comment,  I have tried the GIF solution and was not able to resolve the issue.

    It is the rendering that EI gives to the image.  Here is a look at what your page appears like on different browsers:

    And here is a clone of your form using a GIF file:

    Unfortunately, this rendering of the browsers is something that can not be controled with our builder.