DHTML Lab - dhtmlab.com - IE4 / IE5 Rendering Differences | 4
IE4 / IE5 Rendering Differences
modal dialog height
To display the same visible content in modal dialogs for both IE4 and IE5. In the case of IE5, the status bar should not be visible.
In our example, the dialog is 200 pixels wide and 200 pixels high.
Your Browser Result (Live)
IE4 - IE5 Results (Illustrated)
The status bar cannot be hidden on a modal dialog in IE4. Therefore the value of status: is ignored. The complete height of the dialog, including the status bar is 200 pixels.
IE5 can hide the status bar. The result is a dialog of 200 pixels height without a status bar.
More content is displayed in the IE5 version than the IE4 version. So what, you say. In many cases, this content difference will not matter, like in the example above, where the dialog is used to display scrolling text.
But what if the modal dialog is used for OS-type application dialogs that usually include non-scrolling precisely-positioned form elements requiring user input?
Here's a real-world example. In my day-job (at WebSentric), I was called upon to create an image-selector dialog. Using this dialog, the user selects an image to display in the whiteboard module of the DHTML application we're developing.
Here are screenshots of the dialog in its IE4 and IE5 versions, with a specified height of 220px:
The Cancel button on the bottom right is cut off and all the elements close to the bottom are not spaced elegantly.
A true application-dialog look with no status bar and correct spacing. All elements are positioned elements of course.
Now it's evident that allowances must be made in dialog heights for the two browser versions, if the same content is to be visible in both and IE5 is to be lacking a status bar.
Create a taller modal dialog, conditionally, for IE4 users, using one of the methods below. The normal status bar height is 20 pixels:
isIE5 = (navigator.appVersion.indexOf("5.")!=-1); window.showModalDialog("somepage.html",null, "resizable:no;status:no;dialogWidth:200px; dialogHeight:"+ (isIE5 ? "220px" : "240px") );
In the HEAD of the page loaded into the dialog, check for IE5 use, and set the dialogHeight property accordingly:
isIE5 = (navigator.appVersion.indexOf("5.")!=-1) window.dialogHeight = isIE5 ? "220px" : "240px";
If our image-selector dialog is adapted for IE4, the result would be:
The status bar might be intrusive, but we now display the required content correctly.
There are other ways to size the dialog, and you can choose whichever method you are accustomed to, as long as your IE4 dialogs are taller than the IE5 versions.
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: Oct 19, 1999
Revised: Oct 19, 1999