Detecting CSS browser inconsistent rendering by means of JavaScript?

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?

oops, its the second one! they are both the same.

adardesign
– adardesign

2010-06-10 20:44:01 +00:00
Commented Jun 10, 2010 at 20:44 — adardesign
– adardesign, Commented Jun 10, 2010 at 20:44

Pekka · Accepted Answer · 2010-06-10 20:44:48Z

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

answered Jun 10, 2010 at 20:44

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Bridges · Accepted Answer · 2010-06-10 20:45:22Z

2

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.

answered Jun 10, 2010 at 20:45

Matt Bridges

49.6k7 gold badges50 silver badges62 bronze badges

Comments

mipadi · Accepted Answer · 2010-06-10 20:46:51Z

2

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.

answered Jun 10, 2010 at 20:46

mipadi

414k91 gold badges538 silver badges488 bronze badges

Comments

SLaks · Accepted Answer · 2010-06-10 20:43:58Z

1

Check navigator.platform in Javascript.

answered Jun 10, 2010 at 20:43

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

2 Comments

adardesign Over a year ago

Ok, i will check out. Do u have any reason why this happens?

adardesign Over a year ago

Thanks, i got to learn a new property of the navigator object.

Collectives™ on Stack Overflow

Detecting CSS browser inconsistent rendering by means of JavaScript?

Firefox on Windows (firebug inspection)

Firefox on Mac(firebug inspection)

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Firefox on Windows (firebug inspection)

Firefox on Mac(firebug inspection)

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related