Question

I have a small demo contact form that I’m trying to build using Ajax. When I go to style the submit button it takes the padding and font-size properly. However on my Macbook running OSX Lion the button still looks default with no padding, no larger font sizes, etc.

I have experienced this a few times and I have no idea how to fix this. CSS styles usually work the same for all operating systems and this is throwing me for a loop…

Here are two image screenshots taken from both computers so you can see what I mean.

Windows 7

OS X Lion

Is there a special property rule that I should use to reset the Mac styles? I just want to edit the submit button’s font sizes, padding, color, etc. It behaves like this in all browsers, too.

Really appreciate any help on this!

EDIT: here is my code

<input type="submit" name="submit" value="Send E-mail" id="sendbtn" class="sendbtn">

CSS file

form .sendbtn { display: block; font-size: 26px; padding: 3px 6px; }

Answer 1

Currently you are not specifying any styles that could make your buttons same across browsers. Each browser under an OS uses default style for the buttons (influenced by themes as well if any). You need to specify more things such as background , color, border, etc.

For example, this should look same across browsers:

form .sendbtn {
  display: block; 
  font-size: 26px; 
  padding: 3px 6px; 
  background:#eee;
  color:blue;
  border:none; /* or whatever */
}