Marketing digital. Making results.

Disappearing ExtJS buttons in IE 6

I officially hate IE6 and know the reason why now, ExtJS. Working with this library has opened my eyes to the deficiencies in the browser. Enough has been said on the topic so let me get to the meat of the matter.I spent a crazy amount of time figuring out why one button i was trying to set up would not display in IE6. It would some some kind of image, but would only show the entire button when the button was hovered on with the mouse. I tried setting the width, the height, the line height with no results. Here is how i was trying to set up my button:

  var lookupButton = new Ext.Button({  text:'Lookup',  style:'float:right'  })    

Doing so, i got an error in IE6 that stated:

el.owner.createDocument.createRange Object doesn’t support this property or method.

It turns out this is a bug in IE where trying to insert a block level element after a plain text creates this error. The solution for me was to add a span around the text i was creating like:

  {  width: this.displayWidth,  html: '<span>' +  String(this.value) + '</span>'    }    

Hope it helps!