jQuery .width() and .height() strange behaviour

css, html, javascript, jquery

Solution

There are a few jQuery methods for calculating height and width. Try using `outerHeight()`

Excerpt from jQuery Docs: http://api.jquery.com/outerHeight/

`.outerHeight( [ includeMargin ] )`

includeMargin - A Boolean indicating whether to include the element's margin in the calculation.

http://api.jquery.com/innerHeight/

`.innerHeight()`

This method returns the height of the element, including top and bottom padding, in pixels.

Edit: Setting height() on the td-element is adjusted to include the default padding (1px). The computed dimensions of are actually...

(source: wordofjohn.com)

You should set the default padding to 0px to avoid these issues.

table td {
    padding: 0;
}

Edit 2: It appears to be a browser issue (probably something related to the rendering engine's method of calculating a table's dimensions). The effects of this behavior will vary across browers. You should find an alternate, table-less, solution using divs.

Problem

Why in the following code .height() returns 95 rather than 100, while .width() returns 200 as expected ? I work with Firefox 3.6.3. HTML: ``` <table><tr> <td id="my"></td> </tr></table> <div id="log"></div> ``` CSS: ``` #my { border: 5px solid red; } ``` JS: ``` $("#my").width(200).height(100); $("#log").append("Width = " + $("#my").width() + "<br />"); $("#log").append("Height = " + $("#my").height()); ``` I tried .outerWidth() and .outerHeight() and also .innerWidth() and .innerHeight(), but none of them returns the expected result: code example But, if I set `position: absolute` it looks much better ! Can anyone explain this behavior ?

Original source