Menu
I've been scanning through all the popular js libraries, but I can't find one that has a width function for a DOM element that actually accounts for quirks mode in Internet Explorer. The issue is that padding and borders don't get counted in the the width when quirks mode is engaged. As far as I can tell this happens when the doctype is left out or the doctype is set to html 3.2.
Obviously I could just set the doctype to something standards compliant, but this script can be embedded anywhere so I don't have control over the doctype.
To break the problem down into smaller parts:
1) How do you detect quirks mode? 2) What's the best way to extract the border and padding from an element to compensate?
Example with prototype:
<html>
<head>
</head>
<body>
<div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div>
<script>
alert($('mydiv').getWidth())
</script>
</body>
</html>
result:
253 (ff) 250 (ie)
Thanks in advance!
218
In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications.
In computing, quirks mode is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C and IETF standards in standards mode.
@1
document.compatMode
"CSS1Compat" means "standards mode" and "BackCompat" means "quirks mode".
@2
offsetWidth property of a HTML elements gives its width on screen, in pixels.
<div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div>
document.getElementById('mydiv').offsetWidth
//255 (standards) 250 (quirks)
A function that compensates the width for IE quirksmode has to check for the rendering mode then add borders and padding to the width;
function compensateWidth( el, targetWidth ){
var removeUnit = function( str ){
if( str.indexOf('px') ){
return str.replace('px','') * 1;
}
else { //because won't work for other units... one may wish to implement
return 0;
}
}
if(document.compatMode && document.compatMode=="BackCompat"){
if(targetWidth && el.offsetWidth < targetWidth){
el.style.width = targetWidth;
}
else if (el.currentStyle){
var borders = removeUnit(el.currentStyle['borderLeftWidth']) + removeUnit(el.currentStyle['borderRightWidth']);
var paddings = removeUnit(el.currentStyle['paddingLeft']) + removeUnit(el.currentStyle['paddingRight']);
el.style.width = el.offsetWidth + borders + paddings +'px';
}
}
}
Now there are two ways to use it:
var div = document.getElementById('mydiv')
// will try to calculate target width, but won't be able to work with units other than px
compensateWidth( div );
//if you know what the width should be in standards mode
compensateWidth( div, 254 );
The library is probably telling the true. The problem is not that the readings are incorect but that the acutal display is incorect. As an example try:
<div id="mydiv" style="width: 100px; border-left: 100px black solid;"> </div>
then try to change the text inside the div to see what is happening. IE will display various values depending on the text inside while FF will display correctly. IE is trying to fill an 100px + something into a 100px space with various results.
jQuery has two methods for width: .width and .outerWidth. .outerWidth will return the full width of the element. It also has the possiblity to get all the other properties (padding, border etc) like in the example bellow:
$(document).ready(function() {
alert("width=" + $('#mydiv').width()
+ " outerWidth=" + $('#mydiv').outerWidth()
+ " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth"))
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
