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.pa ddingTop) {
newheight = newheight - parseInt(first. style.paddingTo p);
}
if (first.style.pa ddingBottom) {
newheight = newheight - parseInt(first. style.paddingBo ttom);
}
CSS is more complex than you seem to think and scripting it is more
complex too than your attempt above.
first.style.css PropertyName
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.pad dingTop
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.pad dingTop
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.pad dingTop
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.current Style and for DOM Level 2 compliant browsers like Mozilla
you need to use document.defaul tView.getComput edStyle as in
function getComputedStyl eValue (element, cssPropertyName ) {
var ownerDocument, defaultView;
if ((ownerDocument = element.ownerDo cument) &&
(defaultView = ownerDocument.d efaultView) &&
defaultView.get ComputedStyle)
{
return defaultView.get ComputedStyle(e lement, '')[cssPropertyName];
}
else if (element.curren tStyle) {
return element.current Style[cssPropertyName];
}
}
var testElements = [document.docume ntElement, document.body];
var testProperties = ['marginLeft', 'paddingLeft'];
var results = '';
for (var i = 0; i < testElements.le ngth; 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 + ': ' + getComputedStyl eValue(element,
property) + '\r\n';
}
results += '\r\n';
}
alert(results);
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
