Question

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 ?

Answer 1

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.