position:relative with IE and clientHeight, hasLayout Fix
Posted: Fri Apr 16, 2010 7:14 pm
So, when you setup an HMTL page with a DIV that is inline with the CSS attribute
bottom
{
position:relative
}
and then in html you might have:
<div id="bot1" class="bottom">Testing 123</div>
<div id="debug">debug area here</div>
in your Javascript you might have this:
var bot1=document.getElementById('bot1');
var debug=document.getElementById('debug');
debug.innerHTML=bot1.clientHeight;
your webpage when viewed would show maybe "19" in FireFox, while in IE you would see "0". Why?
IE has its own way of doing things, as we all do, so it needs to have a flag called "hasLayout" which needs to be set as "true" or it will show up as "0" for clientHeight.
so simply so this in your CSS for the troublesome DIV
bottom
{
width:900px;
position:relative
}
there, it 'hasLayout' now!
bottom
{
position:relative
}
and then in html you might have:
<div id="bot1" class="bottom">Testing 123</div>
<div id="debug">debug area here</div>
in your Javascript you might have this:
var bot1=document.getElementById('bot1');
var debug=document.getElementById('debug');
debug.innerHTML=bot1.clientHeight;
your webpage when viewed would show maybe "19" in FireFox, while in IE you would see "0". Why?
IE has its own way of doing things, as we all do, so it needs to have a flag called "hasLayout" which needs to be set as "true" or it will show up as "0" for clientHeight.
so simply so this in your CSS for the troublesome DIV
bottom
{
width:900px;
position:relative
}
there, it 'hasLayout' now!