I Have Spotted What Seem to be Mistakes in Your Injected CSS

  • Profile Image
    abajan
    Asked on December 17, 2011 at 10:45 AM

    This post is a response to webminister's post in
    http://www.jotform.com/answers/50699-Formatting-text-inside-a-radio-button

    Nice way to get that "OR" between the radio buttons but I had a look at your injected CSS and spotted what appear to be mistakes. Here are my (unsolicited) suggestions:

    · The second declaration in the first rule can be shortened to padding:2px 10px; because they are both interpreted by user agents to mean "Give the selected element(s) a top padding of 2 pixels, a right padding of 10 pixels, a bottom padding of 2 pixels and a left padding of 10 pixels". (Examples of this and other CSS shorthand declarations can be found here and here.)

    · The last declaration in the said rule should have a space instead of a semicolon between none and !important

    · The first declaration in the third rule is not needed as it repeats what was already declared in the first rule. At any rate, it would be better to simply discard the third rule and transfer its remaining delcarations to the first rule. So, the following two rules:

    .form-all input {
    -webkit-border-radius:20px;
    padding:2px 10px 2px 10px;
    background:#e1f3fd;
    border:none;!important;
    }

    ...

    .form-all input {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    become just

    .form-all input {
    -webkit-border-radius:20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding:2px 10px;
    background:#e1f3fd;
    border:none !important;
    }

    · I'm pretty sure that the correct value of the last rule's declaration should be inline-block instead of block-inline

    Of course, it's quite possible that you might well be employing a hack or two of which I'm ignorant that is (are) achieving the results you wish.