Andy Jeffries wrote:
That is exactly what I already told you, the CSS padding and/or border
is added to the CSS height/width when offsetWidth/offsetHeigth is
computed.
But I posted back in a message* that I'd tried that and it didn't work
(at least in Javascript). I can fudge it, but I'd rather ensure the
code is neat.
Any idea what the problem is with the code below?
if (first.style.paddingTop) {
newheight = newheight - parseInt(first.style.paddingTop);
}
if (first.style.paddingBottom) {
newheight = newheight - parseInt(first.style.paddingBottom);
}
CSS is more complex than you seem to think and scripting it is more
complex too than your attempt above.
first.style.cssPropertyName
in DOM scripting where first is an element object is not in any way the
computed style value, it is the inline style of the element that you can
set with the inline style attribute or with script and the style
property. So your expression
first.style.paddingTop
reads the inline style and thus gives you a value other than the empty
string only if you have an inline style attribute e.g.
<div style="padding-top: 2px;">
in the HTML markup or your script has already set
first.style.paddingTop
to a value.
If you have CSS rules in a stylesheet (either an embedded stylesheet
(e.g. <style type="text/css">) or an external stylesheet linked in (e.g.
<link rel="stylesheet" type="text/css" href="file.css">) then reading
first.style.paddingTop
does not in any way help to reveal whether any stylesheet rules set a
padding on the element.
If you want a computed CSS value on an element then IE supports
element.currentStyle and for DOM Level 2 compliant browsers like Mozilla
you need to use document.defaultView.getComputedStyle as in
function getComputedStyleValue (element, cssPropertyName) {
var ownerDocument, defaultView;
if ((ownerDocument = element.ownerDocument) &&
(defaultView = ownerDocument.defaultView) &&
defaultView.getComputedStyle)
{
return defaultView.getComputedStyle(element, '')[cssPropertyName];
}
else if (element.currentStyle) {
return element.currentStyle[cssPropertyName];
}
}
var testElements = [document.documentElement, document.body];
var testProperties = ['marginLeft', 'paddingLeft'];
var results = '';
for (var i = 0; i < testElements.length; i++) {
var element = testElements[i];
results += 'element ' + element.tagName + ':\r\n';
for (var j = 0; j < testProperties.length; j++) {
var property = testProperties[j];
results += ' ' + property + ': ' + getComputedStyleValue(element,
property) + '\r\n';
}
results += '\r\n';
}
alert(results);
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
