Nested in display:none gives width()/height()=0

[dave.methvin@…]

Given this HTML:

<div id="outer" style="display:none">
  <div id="inner" style="width:10px; height:11px"> </div>
</div>

• $("#inner").width() returns 0
• $("#inner").css("width") returns "10px"
• $("#inner").css("display") returns "block"

If #outer is display:block then #inner returns width()==10. It looks like (in IE6/FF at least) any display:none parent causes width()/height() to return 0. There is a workaround in $.css for the element itself being display:none but since #inner returns display:block it's not in play.

The only fix I can see to return the actual width()/height() is to crawl up the entire tree looking for display:none elements, temporarily setting them all to display:block. If this was implemented I think it would be best to make it optional and require a boolean to request tree spelunking: $("#inner").height(true). Maybe it would be best to just document the behavior as it currently is?

[john]

This is due to the fact that browsers won't report a valid width and height for elements that have a display: none. The fix for this is to use .css() - .width() uses .curCSS(), which is quite different.

curCSS returns the current value of the element. css returns the optimal value of the element (e.g. the full height, even though the element isn't visible).

So, long story short, if you need the full height/width - please use .css("height")/.css("width").

[joern]

SPAMPOLICE