Question

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

Can I debug this inconsistency with JavaScript?
Based on the code below, does anyone have any sugestions to resolve my issue?

Firefox on Windows (firebug inspection)

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

Firefox on Mac(firebug inspection)

.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.

Any suggestions?

Answer 1

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).