One difficultie in the design of javascript components results from differences of interpretation from the browsers. To make simple, the W3C specifies that the width or the height of an element has to reflect its actual contents. That is that the dimensions of padding, border and margins have to be to add to the specified dimensions. Regrettably, Microsoft in the first versions of his browser (up to internet explorer 5) use another model, that is than the size of an element correspond to its global size (including borders, set the margins).
You will say « Ok but they fixed it since version 6 « .
Yes but not because of the Quirks mode (by opposition to the standard mode) which allows the browse to insure a retro compatibility by preserving the former mode of renderer.
And when can you say that you are in Quirks mode (among others)?
By using an HTML page without DOCTYPE in other words in the majority of the cases
To observe the phenomenon just test the following code in a HTML page.
<html>
<head>
<title></title>
</head>
<script>
function init(){
var div=document.getElementById('div1');
div.style.width="200px";
div.style.height="100px";
div.style.border="5px solid red";
div.style.backgroundColor="blue";
var iw=document.getElementById('width');
var ih=document.getElementById('height');
var iow=document.getElementById('offwidth');
var ioh=document.getElementById('offheigth');
div.onmouseover=function(){
iw.value=this.style.width;
ih.value=this.style.height;
iow.value=this.offsetWidth;
ioh.value=this.offsetHeight;
}
div.onmouseout=function(){
iw.value="";
ih.value="";
iow.value="";
ioh.value="";
}
}
</script>
<body onload="init();">
<div id='div1'></div>
Width :<input type='text' id='width'/>
Height :<input type='text' id='height'/>
OffsetWidth :<input type='text' id='offwidth'/>
OffsetHeight :<input type='text' id='offheigth'/>
</body>
</html>
You will observe according to browsers the difference beetween the fixed size (width and height) and the real occupied size (offsetWidth and offsetHeight) by passing the mouse on the div.
Then what are the solutions
- Insert in your page the following doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
Use browser detection and at the need re-size elements
Most of the ajax frameworks use the 2nd solution because they can’t be sure of the pages in which they are executed.
You should not forget to test the mode of renderer to affect or not the new sizes. Just test the property document.compatMode
- if the value is « CSS1Compat then you are in standart mod and you don’t need to change the size
- if the value is « BackCompat » you are in quirks mode and you have to set the size
Here is a squeleton of function that change the width of an object
function(oHtml){
if (window.event && document.compatMode== "BackCompat") {
//Get border,margins and padding size
var delta=......;
//IE and Quirks mode so we increase the size
oHtml.style.width = parseInt(oHtml.style.width) + delta +"px";
}
}
This probleme can seem harmless but the construction of complex components require the assembly of a large number of HTML element and size are very rigorous. A gap of 1 or 2px have naturally consequences on the coherence of the component.
And so, all this work for this old bug…..
