Targeting IE with jQuery, but it doesn't seem to be working

I'm using a script I found called CSS Browser selector. It's worked great in the past, for Chrome, but now I can't seem to get it to work with IE7. The script is supposed to add a browser class to the body tag, but it's not doing it.
I want to to align the text vertically centered and horizontally centered in the thumbnails. I found a hack for IE7 because it doesn't support CSS tables. So I wanted to target IE7 with the script.

Here's the site:

And the browser selector code:

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',m='mobile',h=document.documentElement,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.6')?g+' ff3 ff3_6':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('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

Open in new window

Sorry, the code was all on one line when I downloaded it.

/********** Works/Authors List **********/

#featured h2, 
#all-items h2 {
	height: 39px;
	margin-bottom: 0;
	padding: 17px 0 0 80px;
	color: #fff;
	font-size: 1.7em;
.list-o-items {
	margin-bottom: 22px;
	padding: 20px 0 0 13px;	
	overflow: hidden;
	font: .9em Helvetica, Arial, sans-serif;
	font-weight: 500;
	.list-o-items li {
		float: left;
		width: 135px;
		height: 230px;
		margin: 0 12px 12px 0;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
	.ie7 .list-o-items li { /* targeting IE7 using css_browser_selector.js centering text-vertically */
		position: relative;
	.list-o-items li:first-child {
		margin-left: 0;
		.list-o-items  li img {
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-o-border-radius: 10px;
		.list-o-items li h3 {
			display: table;
			width: 125px;
			height: 49px;
			padding: 5px;
			overflow: hidden;
		.ie7 .list-o-items li h3 { /* targeting IE7 using css_browser_selector.js centering text-vertically */
			position: absolute;
			top: 50%;
			.list-o-items li h3 a {
			display: table-cell;
			width: 100%;
  		vertical-align: middle;
			color: #fff;
			text-align: center;
			text-decoration: none;
			font-weight: normal;
			.ie7 .list-o-items li h3 a { /* targeting IE7 using css_browser_selector.js centering text-vertically */
				position: relative;
				top: 50%

Open in new window


Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
David S.Connect With a Mentor Commented:
The JavaScript seems to be working fine (you don't have the IE Developer Toolbar for IE7?). The problem seems to be with the CSS.

Firstly, IE7 has problems with "left:auto", so to fix that give "left:0" to ".ie7 .list-o-items li h3".

Secondly, you don't really want to vertically align the <h3> anyway; you want to vertically align its contents.

I would recommend a different vertical centering technique. I would use "display:inline-block" for IE7 as shown in these pages:
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Sorry, it took so long to reply. I got pushed to the wall with deadlines!

Thanks so much!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.