CSS and IE Language Hack

Its been a long time since my previous post. Way way back, few sprints ago, I have this specific ticket where I encounter the epic select element whose width differs on different versions of Internet Explorer. The last problem I need to solve is that IE9 behaves correctly and I need to fix that.

Targeting IE8 and below

The hack I applied is for IE versions IE8 and IE7 (since we don’t support IE6). The idea is to set the initial styles for IE7 and IE8 and of course a separate style specific for IE7. And for the rest of the modern browsers including IE9, we use the language selector.

It goes like this:

For the HTML markup:

<select name="quantity" id="quantity">

For the CSS stlyes:

/** Style for IE7 and IE8 **/
select#quantity {
    width: 100px;
    !width: 95px; /** For IE7 only **/
}

/** For the rest of the modern browsers **/
select#quantity:lang(en) {
    width: 105px;
}

The goal was to correctly set the width for different browsers.