jquery cycle.js pager graphics work in Safari, Firefox, Chrome and Opera but disappear in IE.

Question

Hi,

I finally got my site up and running. I am a graphic designer not a programmer so am a newby. Code-wise it may not be the prettiest but it works. If you go to the work section of my site, http://www.maryhutchisondesign.com, the pager (I used a background gif for the a and active state) function works in Safari, Chrome, Firefox and Opera but disappears in Internet Explorer. I got the the pagerAnchorBuilder line emailed to me by Mike Alsup. Is there something I am doing wrong? Here is a sample of the css and js. Also it works with image thumbnails when I copy the code from malsups advanced pager demos but in IE it shifts the positions of the main portfolio images.

.nav_ocn li {
width: 10px;
float: left;
margin: 5px;
list-style: none;
margin-left: 0px;
}
.nav_ocn a {
border: 0px solid #ccc;
text-decoration: none;
margin: -1px; padding: 10px;
background-image: url(../images/pager.gif);
background-repeat: no-repeat;
background-position: left;
} .nav_ocn a.activeSlide {
background-image: url(../images/pager_select.gif);
background-repeat: no-repeat;
background-position: left;
}
.nav_ocn a:focus { outline: none; }

$(document).ready(function() { $('#OCN_gallery').cycle({ fx: 'scrollLeft', next: '#OCN_gallery', speed: 'fast', timeout: 0, pause: 1, pager: '.nav_ocn',

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function() { 
    return '<li><a href="#"</a></li>'; 
}
});

});

Any help and inside would greatly be appreciated.

Thanks,

Mary

Answer 1

Change

return '<li><a href="#"</a></li>';

to

return '<li><a href="#"></a></li>';

There was a missing '>' that IE doesn't handle as well as other browsers.