When jquery tries to get the height of a (display:none) element, it
clones the element as (visiblity:hidden display:block), appends it to
the BODY, calculates the dimensions, and removes it.
Which is all very clever.
The problem comes that if you style your element using css selectors,
then you have to ensure that the css is valid when the above 'trick'
takes place.
For instance, say we had a paragraph with padding defined in the css
like this:
div p { padding: 10px; display: none; }
<div>
<p>yadda bla</p>
</div>
jquery will not work as expected if you do animation on it, for instance
to make it slide into view. The calculation of the height won't take
into account the padding, because the cloning method won't 'see' the css.
Solution: always use ids and classes, but don't nest them in the css; e.g.
p.invisible { padding: 10px; display: none; }
<div>
<p class="invisible">yadda bla</p>
</div>
The css will always be valid regardless of where the paragraph is in the
DOM.
Thought this might be useful!
A
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
