#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0

    Form Button Appears Right in Firefox, Blank on Safari/IE


    Hello everyone,

    I am currently working on a web form for a client; which has a submit button that is appearing it's proper orange color in Firefox, however is not appearing in other browsers. The CSS code for the form can be found below:

    Code:
    <style type="text/css"><!--
    input.large, textarea.large {
        width: 45%;
    }
    input, textarea {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px dashed #999999;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2) inset;
        color: #999999;
        font-size: 85%;
        font-style: italic;
        margin-bottom: 10px;
        padding: 1.4em 2.5%;
        transition: all 300ms ease-in 0s;
    }
    
    input.button, {
        background: -moz-linear-gradient(center top , #F9A538 0%, #F8981D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #F8981D;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Arial', sans-serif;
        font-size: 2em;
        letter-spacing: 1px;
        padding: 0.25em 0;
        text-shadow: 1px 1px 2px #333333;
        width: 39%;
    }
    
    .small-cta input.button {
        background: -moz-linear-gradient(center top , #F9A538 0%, #F8981D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #F8981D;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Arial', sans-serif;
        font-size: 1em;
        letter-spacing: 1px;
        padding: 0.25em;
        text-shadow: 1px 1px 2px #333333;
    }
    .small-cta input.button {
        background: -moz-linear-gradient(center top , #F9A538 0%, #F8981D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #F8981D;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Arial', sans-serif;
        font-size: 1em;
        letter-spacing: 1px;
        padding: 0.25em;
        text-shadow: 1px 1px 2px #333333;
    }
    input.button, input.gform_button, a.button {
        background: -moz-linear-gradient(center top , #F9A538 0%, #F8981D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #F8981D;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Arial', sans-serif;
        font-size: 2em;
        letter-spacing: 1px;
        padding: 0.25em 0;
        text-shadow: 1px 1px 2px #333333;
        width: 39%;
    }
    input.button, input.gform_button, a.button {
        background: -moz-linear-gradient(center top , #F9A538 0%, #F8981D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #F8981D;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Arial', sans-serif;
        font-size: 2em;
        letter-spacing: 1px;
        padding: 0.25em 0;
        text-shadow: 1px 1px 2px #333333;
        width: 39%;
    }
    input.button {
        font-style: normal;
    }
    
    button, input[type="reset"], input[type="button"], input[type="submit"] {
        -moz-appearance: button;
        -moz-binding: none;
        -moz-box-sizing: border-box;
        -moz-user-select: none;
        background-color: buttonface;
        border: 2px outset buttonface;
        color: buttontext;
        cursor: default;
        font: -moz-button;
        line-height: normal;
        padding: 0 6px;
        text-align: center;
        text-shadow: none;
        white-space: pre;
    }
    }
    --></style>
    The code for the form itself can be found below:

    Code:
    <form class="infusion-form" accept-charset="UTF-8" action="(URL address blocked: See forum rules)" method="POST"><input type="hidden" name="inf_form_xid" value="1ea9ec7491b0d482a2ce5796f2502615" />
    <input type="hidden" name="inf_form_name" value="5 tips" />
    <input type="hidden" name="infusionsoft_version" value="1.27.7.27" />
    <div class="infusion-field"><input class="large" id="inf_field_Email" type="text" name="inf_field_Email" value="Email Address" onfocus="this.value=''" /> <input class="button" type="submit" value="GET YOUR TIPS!" /></div>
    <div class="infusion-submit"></div>
    </form>
    I have poured over a number of resources but can't seem to figure out why my button is appearing off (as is the formatting of the hompage, aligning left) in other browsers. Any guidance is much appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    Hello,

    You have an HTML comment syntax ( <!-- --> ) that is wrapped around all your styles. I'd start by removing that.

    The other way that you can style webkit browsers (Chrome/Safari) only is by putting styles inside of this:

    Code:
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    }
    Hope that helps,

    Tyler
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, ah1990.

    A CSS hack/filter, as suggested by etidd, is not needed here.

    Properties and values prefixed by "-moz-", "-webkit-", -ms-", "-o-", etc. are browser engine specific. Most such prefixes are used so that features can be implemented before the specifications for such features have been finalized to prevent compatibility issues between implementations made according to different drafts of the specifications.

    In this case, only the variant for Mozilla browsers (which includes Firefox) is used to specify the background gradient. I recommend you use a CSS3 gradient generator like this one: http://www.colorzilla.com/gradient-editor/ For the other CSS3 properties being used, like border-radius and box-shadow, I suggest you use http://css3please.com/ or http://www.css3.me/.

    I also recommend you test in more versions of browsers, especially for both IE and Firefox, than just the latest of each.

    Originally Posted by etidd
    You have an HTML comment syntax ( <!-- --> ) that is wrapped around all your styles. I'd start by removing that.
    That's to hide the contents of the <style> element from ancient browsers (like Netscape 3) that don't support it. Browsers that do support the <style> element simply ignore an HTML comment that wraps the contents of one. See: http://www.w3.org/TR/html401/present/styles.html#hiding
    Last edited by Kravvitz; April 2nd, 2013 at 03:59 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo