I have an HTML select element which I am wrapping with a div. I am basically making a custom multi-select drop down box so that when the user clicks it instead of showing the usual options it shows a multi-select listbox popped up in a div below it. (There is also a little toolbar div just above this that pops up on click with clear, select all and ok buttons.) The HTML select element should be unclickable and contain the selected items via Javascript at runtime. My code is working fine in FireFox and Chrome, but in IE9 the option select element is still clickable for some reason even though it is wrapped with a div. It bleeds through the div wrapper apparently. I know I could disable the option select but I want it to look enabled. I don't want the HTML option select to ever be clickable, so I've laid a div over it and set the cursor type to pointer. I want the user to be able to click the div laying over the HTML select element and then show my pop-up listbox below it effectively making a custom control. Here is a snippet from my code. I am building this from JavaScript dynamically and setting the el.innerHTML at the end. (btw... I can use YUI and prototype, but not jQuery in this project.)

```
var listText = '<select id="' + this.key + '" format="MultiList" class="' + inputClass + '" value="' + val + '"><option name="">' + val + '</option></select>';

var markup = "<div id='listBoxCtrlWrap_"+this.key+"' style='display:inline-block; position:relative; cursor: pointer; width:100%;'>";
markup += listText;
markup +=      "<div id='divWrap_"+this.key+"' title='"+tooltip+"' style='position:absolute; left:0; right:0; top:0; bottom:0;'></div>";
markup +=      "<div id='listBoxWrap_"+this.key+"' style='display:none; cursor:default;'>";
markup +=        "<div id='listBoxToolbarWrap_"+this.key+"' style='position:absolute; left:0px; top:23px; height:23px; width:99.7%; z-index:90; background-color:#c7ccd2; "; 
markup +=                                                         "border:1px solid #575757; border-bottom-style:none;'/>";
markup +=    "<div style='position:absolute; left:6px; top:2px; z-index:95;'><img     id='listBoxToolbarClear_"+this.key+"' style='cursor:pointer;' src='images/clear_btn.png'/></div>";
markup +=    "<div style='position:absolute; left:62px; top:2px; z-index:95;'><img id='listBoxToolbarSelectAll_"+this.key+"' style='cursor:pointer;' src='images/select_all_btn.png'/></div>";  
markup +=    "<div style='position:absolute; right:10px; top:3px; z-index:95;'><img id='listBoxToolbarOKBtn_"+this.key+"' style='cursor:pointer;' src='images/blue_ok_btn.png'/></div>";

markup +=        "</div>";
markup +=        "<div style='position:absolute; left:0px; top:45px; height: 100%; width:100%; z-index: 100;'>";
markup +=          "<select id='listBoxSelector_"+this.key+"' multiple='multiple' style='height:83px'>";
markup +=            "<option name='loading'>Loading, please wait...</option>";    
markup +=          "</select>";
markup +=        "</div>";
markup +=      "</div>";
markup +=    "</div>";

el.innerHTML = markup;

```

Interestingly if I hover my mouse pointer around the borders of the HTML select I get the pointer hand icon and can click it opening my custom listbox div. But if I click in the middle of the HTML select it just opens its option list. (I don't want that one to ever open for the user. It will only store their selections.) Again this is only not working in IE. I am using IE9. Any suggestions or ideas what might be wrong?

Here is a jsfiddle that shows what I think may be the root of my issue... [jsfiddle.net/willjones/HpHQ3](http://jsfiddle.net/willjones/HpHQ3/) It has a select box that is unpopulated. Notice that in Chrome or Firefox if the select box is hovered over with the mouse a pointer mouse icon is shown and clicking on it does nothing... but in IE the default arrow mouse icon is shown and clicking on the select box opens it up revealing one blank line. What is causing IE to be different here?