Clyde Lobo Clyde Lobo - 8 months ago 46
CSS Question

IE 8 fixed width select issue

I have to specify a width to the

in my html.

It works fine in all browsers except in IE8, which cuts the text that is more than the width


select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;


<option value="1">Some text</option>
<option value="2">Text Larger Than the Width of select</option>
<option value="3">Some text</option>
<option value="4">Some text</option>
<option value="5">Some text</option>


I am open to js, jquery solutions, but would prefer a css only solution


The page in question was a very old page and it forces IE 8 to go into compatibility mode, so the css solution did not work.

I ended fixing it using the following piece of jquery

Assume the select has a class of fixedWidth

$el = $("select.fixedWidth");
$"origWidth", $el.outerWidth()) 

    $(this).css("width", "auto");
  .bind("blur change", function(){
    el = $(this);