Html element width browser discrepancy

I have a Zend Framework MultiSelect form element. In Firefox it is wider than in Chrome or Safari.

This is the way it is supposed to behave:

  • The javascript looks for the width of the #event element. In this case it is always 500px.
  • The actual form element is made 62px thinner than that.

However, the width of the #event element is being shown be javascript as 486 in FF and 474 by Chrome.

The .width() seems to be working, because I made a div and it got the width right on.

Solved! I just needed to use .outerWidth(true) instead. Width only calculates the very inner part of the div, no border, no padding, no margin.

The browsers had different default values for those, so I needed to use .outerWidth(true), which got the entire width. Now it returns 500px when I test.

 

Leave a Reply