The width of items in select box is different in IE 8, Firefox and Google Chrome

Question

I have a problem with the select box in my application. I specified some width to the select box. The width of some of the items in the select box is more than the actual width of the select box. Each browser is treating it differently. I can see a shrink of the select box items in IE 8. Whereas google chrome and firefox takes the maximum width of the items in the select box.

I want to control the width of the select box. Is there any way to do this ?

Answer 1

Each browser renders DOM elements differently, to override it you must use !important css description on desired tag. Width is not the only property of select which needs to be overridden. Try height, margin, border and padding with !important as well. ie.

select
{
border:1px solid #ccc !important;
height:20px !important;
margin:0px !important;
padding:0px !important;
width:200px !important;
}

if still has different size, read about properties of option (select's child) which can be overridden as well.