After creating a form and styling it with CSS, I noticed that the form appears differently on my Mac than on Windows. The elements are smaller and the colors have changed. Why is OS X affecting my CSS? Is there a solution to this issue?
Here is an image showing the problem:
This discrepancy occurs across all browsers on my Mac.
Below is the 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:
/*CSS Styling for form elements goes here*/
Another issue is that the buttons appear white instead of blue, IMG:
HTML code for 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 for buttons:
/*CSS Styling for Buttons goes here*/