Browse Button Colour Difference

  • Profile Image
    longo
    Asked on May 26, 2012 at 11:53 AM

    Hi Folks

    A bit of a strange one, I've modified my browse button using CSS, the colour should be the same as the 'send enquiry' button. Its fine in Firefox, Chrome and IE7/8 but when viewed in IE9 it ignores the CSS and displays yellow.

    Any help would be appreciated

  • Profile Image
    abajan
    Answered on May 26, 2012 at 02:53 PM

    Replacing your .qq-upload-button rule with the this rule should solve the problem. Incidentally, achieving rounded corners in all versions of IE is possible but unless it's of the upmost importance, it's hardly worth the effort.

  • Profile Image
    abajan
    Answered on May 26, 2012 at 03:21 PM

    Just FYI, I've updated the rule at the link to make the browse button look more like the submit button.

  • Profile Image
    longo
    Answered on May 27, 2012 at 04:44 AM

    Thanks abajan things look fine except IE9 is ignoring the radius attribute, I tried adding !important but still no show.

    I've also added a height attribute in qq uploader which is being ignored by all browsers.

    Your thoughts would be appreciated

  • Profile Image
    abajan
    Answered on May 27, 2012 at 08:10 AM

    Adding !important in this instance will have no effect because there's a bug in IE9 where if a background gradient and rounded corners are applied to an element, the background outside of the radii will bleed beyond the corners (as noted by Brad in the comments of this blog post). There's a remedy called PIE (Progressive Internet Explorer) but to be honest, I have no experience with it. However, my colleagues may be able to render assistance if you would like to try it. What I do know is that its use would require your embedding a copy of the form's full source into a web page.

    Incidentally, my rule at the link was actually updated again to include two extra border radius declarations (highlighted in red)

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

    They should be declared in that order for them to work properly. I believe the order of the first two isn't important but border-radius should be the last but I'll need to check that.

    Regarding the application of a height declaration being ineffective, I think it's being applied to the wrong class (qq-uploader). It should actually be included in the .qq-upload-button rule. Moreover, in order for the button to be displayed at a height of just 20px (assuming that's what you're trying to achieve) would require the inclusion of a padding declaration in the said rule to override padding:8px 0; (shorthand for padding-top:8px; padding-right:0; padding-bottom:8px; padding-left:8px;) declared in the JotForm style sheet.

    Is the upload button in this clone of your form what you wanted? If so, view the form's source and copy the injected CSS to your own form. The button in my form is actually 24 pixels high due to the 2px top padding applied to the .qq-upload-button rule.  (Unfortunately, as you have no doubt realized, text-shadow is another one of those CSS3 properties not supported in IE. However, speaking under correction, the application of PIE would also correct that.)

  • Profile Image
    longo
    Answered on May 27, 2012 at 12:38 PM

    I've used the CSS in your clone, thanks for your help