<p>I’m having an issue where a drop down list in IE 6/7 is behaving as such:</p>

<p><img src="https://i488.photobucket.com/albums/rr249/djfloetic/ie7.jpg" alt="alt text"></p>

<p>You can see that the drop down <code>width</code> is not wide enough to display the whole text without expanding the overall drop down list.</p>

<p>However in Firefox, there is no issue as it <code>expands the width</code> accordingly. This is the behaviour we want in IE 6/7:</p>

<p><img src="https://i488.photobucket.com/albums/rr249/djfloetic/firefox.jpg" alt="alt text"></p>

<p>We’ve looked at various ways to utilize the <code>onfocus, onblur, onchange, keyboard and mouse events</code> to attempt to solve the problem but still some issues.</p>

<p>I was wondering if anyone has solved this issue in IE 6/7 without using any toolkits/frameworks (YUI, Ext-JS, jQuery, etc…).</p>

I would recommend making the select wider. Firefox is friendly about it and expands the width of the option so that you can see its value, but that doesn't solve the problem that once you've selected an option, you won't be able to see exactly what you selected as a user unless you make the select wider. So from a user-friendliness viewpoint, I would advise just allowing the browser to size the select based on its contents, or set a width that is wide enough for the value of the widest option's contents.