Search code examples
javascriptmootools

getting the Width of an element without padding in Internet Explorer

I want to fit images on my site to the size of their containing element, so I have this:

if (userHasMicrositePhoto) {
    var width = $('micrositePhotoDiv').getComputedSize().width;
    $('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}

My handler file userImage.ashx returns the image given by the ID, scaled to the width given as a parameter.

This works fine in firefox, chrome & co, but doesn't work in Internet explorer - the image returned is too large. I think this is because .getComputedSize().width reports a width that includes the size of the padding (but on the border or margin) in Internet explorer, but returns only the usable area in other browsers. As a result, the width given by internet explorer is too large.

I can't find any other fields accessable for.getComputedSize() that allows me to find the 'actual' width in Internet Explorer. I tried using .getComputedStyle() to get the padding so I could subtract it from the total width, but this returns a string, and I am styling the micrositePhotoDiv element as padding: 0.75em, so this doesn't work.

What do I need to do to get the right width in internet explorer?

Solution

  • You can make the padding 0, but checking computed styles for sizes and positions is often buggy and hard to reconcile acreoss browsers.

    Use offsetWidth or clientWidth instead, on all browsers.