Question

I’m apologizing up front for a question that is not particularly narrowed or beneficial to the greater community. It’s now a matter of personal sanity to fix this issue.

I am working on a website and I created a social drawer. Basically you hover over a social media tab and it shifts left slightly. When you click it a drawer opens up with that SocMedia feed inside.

It works fine on FF, Chrome and Safari. Absolutely nothing happens in IE9! When I first created the drawer it worked fine in IE, but as I’ve continued to develop the site apparently I’ve got something conflicting with it. But it’s not just a JS conflict because even the CSS hover functions are not working and, in fact, I am using minimal jQuery to accomplish this effect. CSS is doing most of the lifting.

Also, I realize CSS3 transitions don’t work in IE and I’m not concerned about the smooth movement in IE.

Anyway, here’s a link to the site. Once past the Age Gate you’ll see the social drawer in the upper right corner underneath the Menu. Try it first in a non-IE browser to see how it should behave.

http://pearlvodkatest.com/

The HTML:

<div id="social_drawer">
<div id="twitter_drawer" class="drawer_pull"></div>
<div id="tw_drawer" class="drawer"> </div>
<div id="facebook_drawer" class="drawer_pull"></div>
<div id="fb_drawer" class="drawer"></div>
<div id="google_drawer" class="drawer_pull"></div>
<div id="gl_drawer" class="drawer"></div>
</div>

Here’s my jQuery:

<script type="text/javascript">
$('#facebook_drawer').click(function() {
$(this).toggleClass('open');
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#fb_drawer').toggleClass('open');
});
$('#twitter_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#tw_drawer').toggleClass('open');
});
$('#google_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#gl_drawer').toggleClass('open');
});
</script>

And here is the CSS:

#social_drawer {
width: 36px;
height: 450px;
background: url(images/tab_shadow.png) right top no-repeat;
position: absolute;
z-index: 1000;
right: -7px;
/*box-shadow: -10px 0 27px -13px #000000 inset;*/
padding-top: 25px;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
overflow: hidden;
}
#social_drawer.open {
width: 375px;
box-shadow: none;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
}
#social_drawer .drawer {
background: #fff;
width: 0px;
height: 400px;
position: absolute;
z-index: 1000;
left: 29px;
right: auto;
box-shadow: 0px 0 21px -5px #000000 inset;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
opacity: 0;
border: none;
}

#social_drawer #fb_drawer.drawer.open {
border: 3px solid #336699;
}
#social_drawer #tw_drawer.drawer.open {
border: 3px solid #6699cc;
}
#social_drawer #gl_drawer.drawer.open {
border: 3px solid #d94c2c;
}
#social_drawer .drawer.open {
left: auto;
right: 0;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
display: block;
opacity:1;
width: 295px;
padding: 21px;
}
#social_drawer .drawer_pull {
width: 30px;
height: 31px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
cursor: pointer;
padding: 3px 0;
position: absolute;
right: 0;
z-index: 5000;
}
#social_drawer.open .drawer_pull.open {
left: 0;
width: 36px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
}
#social_drawer.open .drawer_pull.hidden {
float: right;
width: 30px;
margin-right: -30px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
opacity: 0;
}

#social_drawer .drawer_pull:hover {
width: 36px;
}
#facebook_drawer {
background:url(images/social/facebook_drawer.png) left no-repeat;
top: 60px;
}
#twitter_drawer {
background:url(images/social/twitter_drawer.png) left no-repeat;

}
#google_drawer {
background:url(images/social/google_drawer.png) left no-repeat;
top: 95px;
}

Initially I thought it was a z-index issue but I’ve tried a number of z-index combinations and even moved the social drawer in and out of different divs to no effect. I’m sure it’s probably something minor I am just overlooking.

Someone smarter than me please help! My sanity is at stake. Thanks in advance. Let me know if I need to provide any more information.

Answer 1

Remove the z-index:-100; from the BODY tag. IE doesn’t like negative z-index usually.

When I did this in the Developer Tool, your social icons behaved as designed. I changed it to z-index:0;