IE6 Quirks When Sizing HTML Elements

IE6 rolls with another party foul at the HTML kegger.

You can set the height and width of elements in Mozilla browsers to be 100%, or some percentage thereof.

Guess what.

In IE6 these elements will not appear. It doesn't seem to be enough to then use JavaScript to set the element width and height to a fixed value. They've got to start fixed.

IE6 actually allows a percentage width, but the height had better start out absolute or your element will just disappear-- in fact it will have a height of 0px, no matter what the IE debugger tells you.

IE Bug - Dynamically Created Elements Have No Name

IE fails to set the name of elements generated using createElement correctly:
http://www.easy-reader.net/archives/2005/09/02/death-to-bad-dom-implementations/

The solution is to butcher createElement and use it like createElement(""); but this doesn't work in sensible browsers.

Dynamically Adding Styles via JavaScript

This one is straight forward but then IE has to go and spoil the party. The idea is to create a style element and then append a text node containing your style information to it; then append the style element to the head of the page. Trouble is, IE blows up when you try to run createElement("style"). So you have to use MS' proprietary function. I won't bore you more, here is the code (replace YOURCSSTEXT):

var ss = null;
        if(document.createStyleSheet) // IE
        {
                ss = document.createStyleSheet();
                ss.cssText=YOURCSSTEXT;
        } else {  // All other browsers
                ss = document.createElement("style");
                ss.type="text/css";                ss.appendChild(document.createTextNode(YOURCSSTEXT));
                document.getElementsByTagName("head")[0].appendChild(ss);
        }

IE Bug - Dynamically Created IFrames have No Name

IE has an annoying bug that when you use JavaScript to create an IFrame (or, as Jeff Norton points out in the comments, ANY element!), you can't set the name using .name or setAttribute. It just doesn't work.

I had tried to submit a form and set the target to the IFrame, and a new window popped open. WTF?

Solution is here:
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/

So instead of document.createElement("IFRAME"); do document.createElement("<iframe name="'blah'">"); and catch the exception on good browsers.

Dynamically Resize an IFrame in Firefox AND IE

So this is a big mystery out there on the net. There are a ton of silly solutions that half work. This one works for me on IE 6 & 7 and Firefox 2.x. I haven't tried it on anything else. Firefox actually accomplishes all this easily; just set the height of the IFrame to 100%. IE, on the other hand, won't behave. The IFrame needs to be inside a table, and sized to 100% to fill the table. Then you have to alter the size of the table. This doesn't work in FireFox though.

/* Dynamic Resizer v1.1 by Peter Vieth
   Resizes iframe(s) to be the same size as their content by attaching onload events for each browser 
   ATTACH THE FOLLOWING EVENT TO YOUR IFRAME (here called reportIFrame) */
if(window.addEventListener)  // Mozilla, FF, NS
  reportIFrame.addEventListener('load', resizeEvent, false) ;
else // IE
  reportIFrame.attachEvent('onreadystatechange', resizeEvent ); 

/* Bug fix for IE (added v1.1):  IFrames created by JavaScript don't actually have a "name" in IE's internals */
if(document.all) {
        if(self.frames[reportIFrame.id].name!=reportIFrame.name) 
                self.frames[reportIFrame.id].name = reportIFrame.name;
}

/* HERE IS THE EVENT DEFINITION */

function resizeEvent(evt) {
  var ieKey = "srcElement";
  var mozKey = "currentTarget";
  var IFrameObj;
  evt[mozKey] ? IFrameObj = evt[mozKey] : IFrameObj = evt[ieKey];
  fitIframe(IFrameObj);
}

/* THIS FUNCTION FITS THE IFRAME TO DOCUMENT SIZE */

function fitIframe(IFrameObj) {
var IFrameDoc;
if (IFrameObj.contentDocument) {
  // For NS6
  IFrameDoc = IFrameObj.contentDocument;
  IFrameObj.style.height=(parseInt(IFrameDoc.height)+50)+"px";
  //alert('detected NS6');
} else if (IFrameObj.contentWindow) {
  // For IE5.5 and IE6
  IFrameDoc = IFrameObj.contentWindow.document;
  if(IFrameDoc.body!=null) { // the IE event fires too often, and fires before IFrame is loaded, in which case doc==null.  It fires AGAIN once it loads fully, so ignore the first time
   try {
       var table = document.getElementById(IFrameObj.parentName);
   } catch (e) { alert('IE5.5+: Unable to located IFrames parent table: '+IFrameObj.parentName ); }
   try {
var height=parseInt(IFrameDoc.body.clientHeight)+20;
table.style.height=height;
      } catch (e) { alert('IE5.5+: Unable to get size of IFrame: '+IFrameObj.name ); }
  } // if IFrameDoc!=null

} else if (IFrameObj.document) {
  // For IE5
  IFrameDoc = IFrameObj.document;
  try {
document.getElementById(IFrameObj.parentName).style.height=IFrameDoc.body.scrollHeight-IFrameDoc.body.offsetHeight;
  } catch (e) { alert('IE 5.0: Unable to located IFrames parent table or get size of IFrame: '+IFrameObj.parentName ); }

} else {
  alert('fitIframe was unable to detect the browser version');
  return true;
}
}

Attach an OnLoad event in FireFox and IE using JavaScript

IE uses the function attachEvent while FireFox uses addEventListener. IE calls the event onload, while Firefox calls it load. Your function can be called anything.

if(document.all)
window.attachEvent('onload',Yourfunction);
else
window.addEventListener("load",Yourfunction,false);