J
jdlwright
Hi, I need to place a DIV exactly over a textarea element, but I can't
calculate the correct value that I should set style.width to, because
offsetWidth and style.width are calculated differently under strict
mode.
Under strict mode, offsetWidth returns the width of an element plus
it's padding and border (i.e. just the same as quirks mode).
Whereas, under strict mode style.width doesn't include padding or
border widths.
Is there any way to figure out the padding + border width for an
element, so that I can subtract them from offsetWidth?
Here's a simple page that illustrates my problem (note when viewing
under strict mode, the red DIV doesn't line up with the textarea,
however under quirks mode it does line up).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<style>
.box{
border:1px solid red;
padding: 2px;
}
</style>
<script type='text/javascript'>
window.onload = function(){
document.getElementById('d').style.width =
document.getElementById('t').offsetWidth+"px";
document.getElementById('d').style.height =
document.getElementById('t').offsetHeight+"px";
}
</script>
</head>
<body >
<textarea id='t' style="z-index:100; width: 200px; height: 210px;
position:absolute; left:50px; top:200px; padding: 2px;"></textarea>
<div class="box" id='d' style="position:absolute; left:50px;
top:200px;z-index:101; ">
</div>
</body>
</html>
I should state that;
a) the padding of the textarea and div could be set to anything, and
may be set with inline style or a stylesheet, or not specified at all.
b) I can't force the DIV padding to zero.
If anyone has any ideas, please post and you'll at least have my
gratitude!
Thanks
Jim
calculate the correct value that I should set style.width to, because
offsetWidth and style.width are calculated differently under strict
mode.
Under strict mode, offsetWidth returns the width of an element plus
it's padding and border (i.e. just the same as quirks mode).
Whereas, under strict mode style.width doesn't include padding or
border widths.
Is there any way to figure out the padding + border width for an
element, so that I can subtract them from offsetWidth?
Here's a simple page that illustrates my problem (note when viewing
under strict mode, the red DIV doesn't line up with the textarea,
however under quirks mode it does line up).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<style>
.box{
border:1px solid red;
padding: 2px;
}
</style>
<script type='text/javascript'>
window.onload = function(){
document.getElementById('d').style.width =
document.getElementById('t').offsetWidth+"px";
document.getElementById('d').style.height =
document.getElementById('t').offsetHeight+"px";
}
</script>
</head>
<body >
<textarea id='t' style="z-index:100; width: 200px; height: 210px;
position:absolute; left:50px; top:200px; padding: 2px;"></textarea>
<div class="box" id='d' style="position:absolute; left:50px;
top:200px;z-index:101; ">
</div>
</body>
</html>
I should state that;
a) the padding of the textarea and div could be set to anything, and
may be set with inline style or a stylesheet, or not specified at all.
b) I can't force the DIV padding to zero.
If anyone has any ideas, please post and you'll at least have my
gratitude!
Thanks
Jim