Select Problem with IE

Most of you probably ran into this article because you are half bald trying to figure out how to make your select box options show their full text in Internet Explorer when the select option has a static size set. Like the figure above illustrates, looks simple to fix but holy cow did it take a lot of research to figure out the best way to do it. After hours of research, I found out that I can’t do it with CSS alone. Many solutions I saw out there used Javascript and injected CSS in the Javascript. I’m not a big fan of CSS in Javascript. I’d rather have my CSS separate and change the way something looks in the stylesheet. For that reason I find myself using jQuery’s addClass, removeClass, toggleClass, and toggle quite often. That is what this code is going to do for you. I don’t think this is the best way for everyone, but it is the best way for me.

I’m not a programmer per say so I stick to the different code libraries. I am a jQuery man so my code requires jQuery. So Here is my code and I’ll explain after you see it.

    $(function() {
      $('select').focus(function(){
        $(this).addClass('ie_select');
      });
      $('select').blur(function(){
        $(this).removeClass('ie_select');
      });
    });

Place that code in the head of your document wrapped in a script tag or however you like to call your Javascript and create a specific CSS class called .ie_select in your stylesheet and style it according to what you need it to do. If you only want to apply the Javascript to specific browsers, you’ll need to add some conditional statements to your code.

It’s fairly straight forward code. This is what is going on:

1. When a select item has focus, add the CSS class of .ie_select to the select item.
2. When a select item loses focus or blurs, remove the CSS class of .ie_select from the select item.

I’ve found this code is much more readable to someone like myself who dabbles in jQuery when it comes to presentational use of it. That is exactly what the purpose of this code is, to fix presentation.

FYI

For what I was doing I had to add position: absolute to my CSS for .ie_select to get things to display the way I needed. A majority of the tutorials out there did nothing more than change from a fixed width on the select to a width: auto and that seemed to be all they needed. My layout was a bit more complicated and that didn’t work for me. This code will not style your select element for you, but it will enable you to be able to style it the way you need things styled.

• Safari
• Flock
• Firefox
• Seamonkey
• Chrome
• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Opera

I just threw Seamonkey in the testing for the heck of it.  I’m the least concerned about Opera.  It is crazy how inconsistent even Internet Explorer is.  Some of the sites I’ve been checking look different in IE6, IE7, and IE8 from each other.  All unique in themselves.  I of course have got to say “Internet Explorer Sucks!”  That phrase is an unspoken in most places I’ve worked.  Everyone knows everyone else hates IE so you don’t even have to say it.

It can be tricky cross browser checking all the different browsers, so I’ll let you know my setup.

• 24″ iMac – Leopard
  • Firefox
  • Flock
  • Opera
  • Safari
  • Seamonkey
  • VMWare Fusion – Windows XP
    • Chrome
    • Firefox
    • IE Tester
      • Internet Explorer 6
      • Internet Explorer 7
      • Internet Explorer 8

Hopefully this has helped someone.  Alternatives to VMWare Fusion are VirtualBox and Parallels Desktop.  You have to have a Windows install running to test Internet Explorer properly.

This setup is working great for me and I trust the tests I’m running also.  I’ve tried Multiple IE’s and always have issues with cookies and form testing.  I have found IE Tester works way better than anything I’ve ever used before.