The demo goes over zebra striping, first-child/last-child, hovering, and just straight up ways of overcoming some still lingering cross-browser compatibility issues.  Hopefully you can gain something from it that can benefit you in your projects and websites.

Go to Demo Now

pre {
white-space: pre-wrap; /* css-3 should we be so lucky... */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 ?? */
white-space: -o-pre-wrap; /* Opera 7 ?? */
word-wrap: break-word; /* Internet Explorer 5.5+ */
_white-space: pre; /* IE only hack to re-specify in addition to word-wrap */
}

/*
CSS Browser Selector v0.3.4 (Sep 29, 2009)
Rafael Lima (http://rafael.adm.br)

License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua = u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1;},g='gecko',w='webkit',s='safari',o='opera',h=document.getElementsByTagName('html')[0],b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?'mobile':is('iphone')?'iphone':is('ipod')?'ipod':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win':is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

That code makes it so I can even validate my CSS and get rid of my attribute hacks. The code adds a bunch of different classes to your HTML tag. It adds the Operating System, the Browser, the Browser Version, and if Javascript is enabled or not. You can do a lot with that info. I was able to then create a Chrome specific style for my stylesheet. Love this code. It has been added to my regular arsenal of code.

Just include that code in your head or reference it as a separate file in your head. I prefer a separate file, but to each their own.

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.