CSS Specificity

  • Profile Image
    Asked on December 20, 2012 at 06:28 AM

    Hi, I'm using this custom css below to target IE8 but it's being ignored

    Your thoughts would be appreciated.

  • Profile Image
    Answered on December 20, 2012 at 07:06 AM

    Thanks for asking.

    The rule's selector is invalid, as there's no ie8 class in either the style sheet or embedded style to which the form refers.

    If you were trying to use conditional CSS to target only IE8, some of the required characters can't be used in the inject CSS tool. As such, you would have to obtain a copy of form's full source from the Embed Form Wizard and paste it into your web page and then insert the conditional CSS there.

    However, I compared the web page in IE8 vs Chrome and didn't notice any difference in how the form was being displayed in relation to the surrounding elements. What exactly were you trying to achieve?

  • Profile Image
    Answered on December 20, 2012 at 08:38 AM

    Hi abajan

    You woud'nt notice any difference as I have set a .ie8 rule in the site stylesheet to overcome the problem, basically the top footer margin is set to 10px where in ie8 it needs to be 15px to appear the same so that page's footer has an id of 'footer1', all the other pages are 'footer' which ie8 has no problem with.

    The forms default padding (all other browsers) is: padding:0 0 8px 0; so increasing 8 to 15 would have meant I could have eleviated 'footer1' and tidied up my style sheet.

    I have since discover another problem, I have styled the submit button with some added css, for some reason the color:#000000 !important is being ignored and it's defaulting to #F9FBFD, it should behave as the browse button above on hover, here's the css I'm using


    .form-submit-button-cool_grey:hover {
    color:#000000 !important;
    background: -moz-linear-gradient(center top , #e9e9e9 0%, #e9e9e9 100%) repeat scroll 0 0 transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#e9e9e9)) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#e9e9e9') !important;



  • Profile Image
    Answered on December 20, 2012 at 09:31 AM

    Hi again

    Changing the selector of both of the relevant rules from .form-submit-button_grey to just #input_5 should solve the problem, as can be seen in this clone. (View it's source to see exactly how the two rules' selectors have been changed.)

    Do let us know if you would like further help with this or any other form.


  • Profile Image
    Answered on December 20, 2012 at 10:51 AM

    Thank you