DHTML Lab - dhtmlab.com - IE4 / IE5 Rendering Differences | 2

IE4 / IE5 Rendering Differences
file upload object width

Author Intent

To display a file upload INPUT object that has a total width of an author-specified value.
In our example, this value is 200 pixels.

HTML

<INPUT TYPE=FILE STYLE="width:200">

Your Browser Result (Live)

<-- 200 pixels -->

IE4 - IE5 Results (Illustrated)

IE4	IE5
The author-specified pixel width is applied to the user text input field. The Browse... button is placed outside the desired width.	Both the text input field and the Browse... button are contained within the author-specified width.

The desired rendering is that of IE5, of course, since it allows us to control the total object width. In IE4, the width of the Browse... button can vary, depending on any specified font size, so we cannot develop a formula for determining the IE4 total width.

Solution

To ensure that both browsers display the intended width correctly, we must adjust the IE4 width after object creation, through JavaScript.

At the end of our page, we can include this code snippet:

allInps = document.all.tags("INPUT");
for (i=0;i<allInps.length;i++) {
   tempInp = allInps(i);
   if(tempInp.type.toUpperCase() == "FILE") {
      if(tempInp.offsetWidth > tempInp.style.pixelWidth) {
         widthDiff = tempInp.offsetWidth - tempInp.style.pixelWidth;
         tempInp.style.pixelWidth -= widthDiff;
      }
   }
}

We first identify all objects created with the INPUT tag, and assign them as a collection to the allInps variable.

Then, we cycle through the allInps collection, identifing those collection objects that are TYPE=FILE (file upload objects.)

Once we find a file upload object, we compare its offsetWidth to its style's pixelWidth. The offsetWidth property reflects the screen space occupied by the object. The pixelWidth is the author-specified width. If the offsetWidth is found to be larger than the pixelWidth, we have identified an instance of IE4 rendering. We, therefore, adjust the object to fit our intended width, by narrowing the pixelWidth by the difference between the old pixelWidth and the offsetWidth.

A similar rendering problem may also occur with your IFRAMEs.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column26/fileupload.html