OS X is messing with me css, how to fix - css

Question

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*/
}

Answer 1

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.