ansaurus

Question

Width of an element accounting for quirks mode in javascript?

Answer 1

+1 A:

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;">&nbsp;</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"))
});

Aleris 2008-10-21 10:31:22

Answer 2

+1 A:

javascript:(function(){
    var mode=document.compatmode,m;if(mode){
     if(mode=='BackCompat')m='quirks';
     else if(mode=='CSS1Compat')m='Standard';
     else m='Almost Standard';
     alert('The page is rendering in '+m+' mode.');
    }
})();

that code will detect the mode for you.

IE will also throw into quirks mode if ANYTHING but doctype is on the first line. Even a blank first line with doctype on the second line will cause quirks mode.

Jeremy B. 2008-10-21 12:49:17

Answer 3

+2 A:

@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 );

pawel 2008-10-21 13:34:45

where does the currentStyle attribute come from? i'm trying it in ff and it seems to be undefined

christoff 2008-10-22 05:14:18

currentStyle is IE's version of getComputedStyle(). It returns the actual value of given CSS property. You can read more in PPK's article: http://www.quirksmode.org/dom/getstyles.html

pawel 2008-10-22 06:58:00

With Prototype, you can use Element.getStyle() as well.

Eric Nguyen 2009-06-09 08:18:42

ansaurus

tags:

views:

answers:

Width of an element accounting for quirks mode in javascript?

related questions