forcing IE 6 to allow select input with different width for option

if you floow the link above you can read a nice description of the problem. IE6 sucks, we know...

the solution in the other blog is interesting. here is one that uses jQuery and it's wrapped into a little extension.

The principle is thus: if (IE6) {wrap a container div around the input and control its width and overflow} else {use CSS only}

THe reason why this works is that IE6 uses the O/S to draw the select box, so once the box is open, it really doesn't matter what is going on in the page. Back in the day I used iframes to mimic drop down menus inside web apps.

.simpleSelectBoxContainer {width:18em;position:relative;}
.simpleSelectBoxContainer .selectContainerOverflow {width:16.7em;overflow:hidden;}
.simpleSelectBoxContainer img {position:absolute;right:0px;top:0px;}
.simpleSelectBoxDefault {width: 17.5em;}

and the use in the script:

$('.simpleSelectBox').simpleselectbox();

and the function:

jQuery.fn.extend({
    simpleselectbox: function(options) {
        return this.each(function() {
            if ($.browser.msie) {
                // create the spacer option
                var option = document.createElement("option");
                option.text = new Array(60).join(' ');
                option.value = '';
                this.options[this.options.length] = option;
                var o = $(this)
                    .wrap(' < div class=simpleSelectBoxContainer>< div class=selectContainerOverflow>< /div>< /div>')
                    .closest('.simpleSelectBoxContainer').append('< img src=css/images/icon_dropdownArrow.png/>');
            } else {
                $(this).addClass('simpleSelectBoxDefault');
            }
        });
    }
});