IE 8 fixed width select issue

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

Answers


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">


Need Your Help

how to get AttributeSet properties

android android-layout attributes

Suppose i have a class which extends ViewGroup

RestKit Serialization of related entities

objective-c restkit

I'm trying to send a POST request with RestKit. I have an entity (called workout) that I want to serialize and send to my server backend.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.