How to get real size (getSize(), getComputedSize())

[BorisW]

Hi all,

If I have a div like

    <div id="box" style="width: 90%; padding: 1em; border: 0.5em;"></div>

then

    $('box').getSize().x

returns the complete width in px (including padding and border) and

    $('box').getComputedSize().width

returns 90 (inner width in %).

How can I get the width (without padding and border) in px? Is this possible?

[Barry van Oudtshoorn]

Hi Boris,

Unfortunately, if you're planning on supporting IE, no this isn't
possible. Internet Explorer (including 9!!) doesn't expose the actual
pixel values for % lengths. If you *know* it's a percentage, you can
look at measuring the element's parent, and calculating it yourself, but
that approach is fraught with danger.

As you yourself have discovered, and as you can see at
http://jsfiddle.net/barryvan/87K5b/4/ , all the other major browsers
behave reasonably, but IE simply doesn't. Sorry!

--
Barry van Oudtshoorn
www.barryvan.com.au

[BorisW]

Thank you Barry!

I tested it with firefox. It seems like when using inline css firefox behaves like IE.
In your demo it works just fine.