Easy Slider 1.7 with Internet Explorer 7 Bug Fix
Easy Slider is a jQuery plugin authored by Alen Grakalic. Simply put, it’s a wonderful, compact slider. It doesn’t do everything in the world, but it does what I—as a web designer not specifically comfortable writing my own jQuery—consistently want out of a slider: sliding panels, numeric or arrow controls, and valid markup combined with CSS for display.
That said, sometimes the slider spits out a bug with Internet Explorer 7, and since IE7 is still considered “reasonable to support”, I had to find a workaround.
The bug is simply that the slides (<li> elements) don’t hide inside of their container (a <ul> & a <div id=”slider”>) properly, so you’re left with all of the slides showing up at once and across the page. I’m not sure what causes this, but you might find more info on the actual cause here. Good news is, I have the solution.
#slider {position:relative;}
Simple as that. You could use IE conditional statements to only feed that piece to IE7. Something like this:
<!--[if IE 7.0]>
<style type="text/css">
#slider {position:relative;}
</style>
<![endif]-->Or you could use PHP to only feed the conditional statement to IE altogether, something like this:
<?php $userAgent = $_SERVER['HTTP_USER_AGENT'];$browser = "MSIE";
$ie = strpos($userAgent, $browser);
if ($ie == true) { ?>
<!--[if IE 7.0]>
<style type="text/css">
#slider {overflow:hidden !important; position:relative;}
</style>
<![endif]-->
<?php } ?>Up Next: Level Up, Young Buck, This is Life We're Living Through!