I am trying to get pixel dimensions of elements created with relative units, specifically %. In IE, its element.style.pixelWidth / pixelHeight. In firefox, its element.clientWidth / clientHeight. I found a crossbrowser way to get the pixel dimensions in both IE and Firefox, but when i try this in Chrome, it simply returns the original percentage dimensions.

Here is a really simple test, run it in both firefox and chrome:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
function getElementPixelWidth(elementID)
 var retval = "";
 if( document.getElementById(elementID) )
  if(typeof document.getElementById(elementID).style.pixelWidth != "undefined")
   retval = document.getElementById(elementID).style.pixelWidth;
   retval = document.getElementById(elementID).clientWidth;
 return retval;

function testpixelwidth()
 var pwidth = getElementPixelWidth("userarea");
 alert("Pixelwidth of userarea: "+pwidth);
<BODY ID='body' BGCOLOR=#000000 STYLE="margin:0;border:0;padding:0;overflow:hidden;">
 <DIV ID="userarea" STYLE="position:absolute;top:8%;left:1%;width:98%;height:90%;overflow:hidden;"></DIV>
 <BUTTON ONCLICK="testpixelwidth();" STYLE="position:absolute;top:1%;left:1%;width:10%;height:4%;overflow:hidden;">test</BUTTON>
Firefox will report the pixel dimensions, but Chrome will always report '98'.

It seems that Chrome does not return 'undefined' for element.style.pixelWidth and pixelHeight. Instead, it returns the original dimensions without the units. This property has been implemented but does not actually produce the intended results (pixelWidth should return width in pixels? really?), causing rendering bugs in sites such as mine that are attempting to be cross browser compatible.

This caused me all kinds of headaches, thinking it was actually the clientWidth / clientHeight that was the problem. Something needs to be done about this... either report the proper freakin dimensions with element.style.pixelWidth/Height or turn off support for it.