OS X is messing with me css, how to fix


Tags: css,osx,forms

Problem :

So I made a form and added styling with CSS, it looks fine on windows but when I go to the form with my Mac it looks diffrent, everything is smaller and has changed color. Why is OS X changing my CSS? And is there a way to fix this problem?

Image of problem: http://i.tinyuploads.com/zq3rtp.png

This problem happens in every browser on my Mac

HTML Code:

<p>Name:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="name">
<br /><br />
<p>Email:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="email">
<br /><br />
<p>Website:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="website">
<br /><br />

<p>Priority:<span class="Req-ourForm">*</span></p>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select class="pri" name="priority" size="1" required="required">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
<br />

CSS Code:

input, textarea { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 200px;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

input.sub { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 300px;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

input.captcha { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 45px;
    text-align: center;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

textarea {
    margin-top: 4px;
    width: 380px;
    max-width: 380px;
    max-height: 150px;
    height: 150px;
    line-height: 150%;
    }

input:hover, textarea:hover,
input:focus, textarea:focus { 
    border-color: #b3b3b3;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
    border: 1px solid rgba(81, 203, 238, 1);
    }

.form label { 
    margin-left: 10px;  
    color: #999999; 
    }

.submit input {
    width: auto;
    padding: 9px 15px;
    background: #617798;
    border: 0;
    font-size: 14px;
    color: #C9C9C9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }


/*CSS FOR DROP DOWN*/
label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 160px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.pri {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 85px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.aop {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 60px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.stu {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 65px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

Second issue is that the buttons are for some reason white instead of blue, IMG: http://i.tinyuploads.com/pW0E24.png

HTML code of buttons:

<button id="continue-link" class="button button rect" type="submit"> 
<span>
    <span class="effect"></span>
    <span class="label"> 
        SEND    
    </span>
</span>
</button>


<button id="continue-link" class="button button rect" type="reset"> 
<span>
    <span class="effect"></span>
    <span class="label"> 
        CLEAR ALL    
    </span>
</span>
</button>

CSS of buttons:

/*BUTTON DESIGN*/
.button {
    background-color: transparent;
    border: 0 none;
    border-collapse: separate;
    cursor: pointer;
    display: inline-block;
    font: 11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    overflow: visible;
    position: relative;
}
.button > span {
    background: url("common/src/store/base/patterns/buttons/css/bg/button_colors.png") repeat-x scroll 0 0 / 8px 22px #224272;
    border: 1px solid #224272;
    border-radius: 11px 11px 11px 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: white;
    display: inline-block;
    font: 12px/1 "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
    letter-spacing: 0;
    opacity: 1;
    padding: 4px 25px;
    position: relative;
    text-align: center;
    transition: opacity 800ms ease 0s;
    white-space: nowrap;
    word-spacing: 0;
}
.button:-moz-focusring {
    outline: 0px dotted;
}
.ns .button, .button.rect {
    background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0 transparent;
    border: 1px solid #1992D9;
    border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.ns .button:hover, .ns .button:focus, .button.rect:hover, .button.rect:focus {
    background: linear-gradient(#2F90D5, #0351B7) repeat scroll 0 0 transparent;
}
.ns .button:active, .ns .button.active, .button.rect:active, .button.rect.active {
    box-shadow: 0 1px 0 #FFFFFF, 0 0 9px rgba(0, 0, 0, 0.5) inset;
}
.ns .button > span, .button.rect > span {
    background: none repeat scroll 0 center transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 13px;
    line-height: 15px;
    padding: 4px 20px; /*BUTTON SIZE*/
}


Solution :

The reason your button is not blue is because you are not declaring a webkit gradient. I had a look at your stylesheet. Add the correct prefix for various browsers as below -

.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -moz-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -webkit-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background:  -o-llinear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-appearance: none;
}

This ensures your gradient will work on all browsers that support it.


    CSS Howto..

    how to make an empty span collapse

    How to set height to wrap text only in certain screen size

    How to use metro ui css sidebar and compact classes

    How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

    How can I use True Type Collection (.ttc) in JavaFX?

    How to contain a scrollable div element completely within another?

    How to make slide down menu to slide up?

    How do I align these pictures vertically?

    How to change image size on featured images in wordpress?

    How do I insert a custom font to text with CSS? [duplicate]

    How to set class on div that is inside of repeater in code behind?

    Show different button on page load via Jquery

    how to change css style for every second data (picture) from database?

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    How to get width of
  • stretched to available space in parent
      in IE7?
  • How to slide these divs continuously in loop

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    Rails 4: how to identify and format links, hashtags and mentions in model attributes?

    how to trigger a css animation after certain pixels of scroll

    How to preserve styles of embedded widget?

    GWT how to add css style on Image Resource

    How to specify which element to change background color jquery

    css how to prevent content from drifting underneath fixed position areas?

    How should I keep webpages consistent [closed]

    How to make an equal distance between elements footer?

    How to debug Font-Awesome icons?

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    How to create CSS internal style sheet in CakePHP

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to rotate a picture using css and javascript