CSS renders Input in firefox mac diffrent then firefox PC. can i detect OS via javascript? or maybe a CSS hack?

Question

I have a input[type="text"] the that has padding applied to it behaves differently in firefox PC then on a mac.

Any hacks that can target firefox PC?

These styles are what its seen on firefox PC firebug

.searchContainer input {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
  }

These styles are what its seen on firefox Mac firebug

.searchContainer input  {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
 }

No other styles are applied to these inputs.
Here is a snapshot of FF PC http://tinyurl.com/2wdxmq5
Here is a snapshot of FF mac http://tinyurl.com/2u7f2nl

any suggestions?

Answer 1

Check navigator.platform in Javascript.

Answer 2

You don't seem to be setting a font-size. When you force a height on an input field, you should specify one. It's perfectly conceivable that Macs and PCs have different standard font sizes for input elements.

That said, it's probably better to define the height of the input by setting padding and font-size but no height at all. That way, the browser can handle it easier if the user is using an enlarged font (or the "Text zoom" function in Firefox).

Answer 3

Since you're specifying the input's height in pixels, you'll probably also want to specify the font size in pixels. It looks like platform-specific font rendering may be the culprit here.

Answer 4

It looks like it could be an issue with the font size in the input text box (and maybe the buttons, too). Setting the font size (and even the font family) may solve the problem.