Posted by Neil Crosby on February 12, 2006 09:30 PM
Internet Explorer 6 has lots of “issues” when it comes to displaying SELECT boxes - displaying over the top of any other elements, on a page, not letting its OPTIONS be wider than the surrounding SELECT box, the list goes on. Last week it was my turn to come across a new issue that I could not find reference to anywhere.
Naturally, this caused some consternation. I had to have a SELECT box that showed a certain number of rows at once - one that showed a dropdown instead would just not do. The first thing I did, before yelling foul at Internet Explorer was to test my code in a few other browsers. None of them showed a problem. I ran my code through JSLint, and it was pretty happy. With this done, I created a test case. At this stage I wasn’t exactly sure what was causing the problem, so I coded up a quick page that displayed three SELECT boxes next to each other; one which was completely defined in HTML, one created using the DOM and the “createElement” method, and one created using innerHTML.
The result of this test showed that while Internet Explorer 6 would show a SELECT box with multiple rows with the HTML and innerHTML methods, the DOM only SELECT box would be shown as a dropdown. Interestingly, the dropdown still occupied the amount of space that the multiple rowed element should have taken. Still, it would seem that it’s the DOM methods which Internet Explorer has issues with, rather than the fact that the element was programatically created.
On a hunch, I decided to “touch” the innerHTML of the element sourounding the SELECT box (
outerEl.innerHTML += '';). Amazingly, this caused Internet Explorer 6 to display the SELECT box as expected! My problems were over, and I could get back to work.
Or could I? As it happens, this innerHTML-ising of the SELECT box caused other problems. Foremost of these was that the events which I was adding to the SELECT box using a variant of Scott Andrew’s addEvent method were no longer working! This realisation resulted in my head thunking down onto the desk in exasperation. To come so close to a working solution only to have it unravel in front of me was exasperating, to put it mildly.
Help was at hand though. During my googling to see if anyone else had come across this issue before, I had run into the Channel 9 Wiki’s Internet Explorer Programming Bugs page. Hidden somewhere in the middle of this page was a section about SELECT box bugs. Unfortunately, none of them echoed the exact problem I was having. Still, I persevered, reading the individual bug pages which were linked to. Eventually I came across something that I hadn’t seen before - you can create SELECT box OPTIONs using an “Option” method.
Frankly, I didn’t think that substituting this for the createElement method that was creating the OPTIONs would make any difference at all. After all, the problem lay with the SELECT box itself, surely? Still, I plugged the new code into another test case, and it worked! All the browsers I tested in displayed the SELECT box coreectly, they all fired events as expected, and I was a very happy boy.
If you really enjoyed what you just read, why not buy yourself something from Amazon? You get something nice for yourself, and I get a little bit of commission to pay for servers and the like. Everyone's a winner!