Menu
I have to specify a width to the select in my html.
It works fine in all browsers except in IE8, which cuts the text that is more than the width
CSS
select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;
}
HTML
<select>
<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>
</select>
DEMO
I am open to js, jquery solutions, but would prefer a css only solution
403
Fixed it!
Here is the revised jsFiddle: http://jsfiddle.net/PLqzQ/
The trick is adding the focus selector to your CSS so that it looks like this:
select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;
overflow:visible ;
}
select:focus { width:auto ;
position:relative ;
}
I tested it in IE8 and it works like a charm.
VERY IMPORTANT: You have to add a Doctype Definition to your Code otherwise the fix won't work for IE8.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
