I've gone back and forth with this one, to no success. It's a slideshow cycle plugin I got from Malsup (Advanced Custom Pager), and I used it on a webpage I created. It works smoothly on every browser, but when I open it in any version of Internet Explorer, it takes the slider pager thumbnails and puts an ugly blue hyperlink border around each one, throwing the design aspect of the website into utter chaos. I've tried adding classes and styles to fix it, (i.e. border:none;) but can't get it just right.
(sidenote) There's music to the slideshow, using the HTML5 audio tag, but IE8 doesn't use that, so I'm working on installing jPlayer into the site.
It's live at the moment: click here :-)
Here it is narrowed down, in case that helps solve the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Restoration Homestead - Bed & Breakfast Farmstay</title>
CSS links
<link href="style/style1.css" type="text/css" rel="stylesheet" />
<link href="style/meettheteam.css" type="text/css" rel="stylesheet" />
JavaScript links
<script src="jquery.js"></script>
<script src="all.js"></script>
<script src="captions.js"></script>
<script src="backstretch.js"></script>
jQuery
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'fade',
speed: 1000,
timeout: 7280,
next: '#arrow_right',
prev: '#arrow_left',
});
</script>
</head>
<body>
<script>
$.backstretch("images/Blurred.jpg");
</script>
<div id="content"><div id="content_container">
<div id="text_team">
<h1>Take a Musical Tour of the Farm!</h1>
<p class="infotext">Music courtesy of Scottish songwriter Dougie Maclean: <a href="https://itunes.apple.com/us/album/inside-the-thunder/id442643297" target="_blank">Open Fields</a></p>
</div>
<div id="pager_container">
<!-- empty element for pager links -->
<div id="adv-custom-pager" class="center external"></div>
</div><!--End of pager_container-->
<div id="slideshow_team">
<div id="arrow_left" id="arrow_left"></div>
<div id="arrow_right" id="arrow_right"></div>
<div id="slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-pager="#adv-custom-pager"
data-cycle-pager-template="<a href=#><img src='{{src}}' width=45 height=35> </a>">
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="images/slider/sunrise.jpg"
data-cycle-title="Sunrise at Restoration Homestead"
data-cycle-desc=""
/>
<img src="images/slider/elsie.jpg"
data-cycle-title="Elise"
data-cycle-desc="The farm's milk cow"
/>
</div>
</div><!-- End of content_container -->
</div><!--End of content-->
CSS Styles
@charset "UTF-8";
/* CSS Document */
#slideshow_team {
width:700px;
height:545px;
background:#FFF;
overflow:auto;
}
#slideshow {
width:700px;
height:545px;
background:#FFF;
display:block;
overflow:hidden;
}
#text_team {
width:250px;
height:140px;
float:left;
padding:25px;
background:#FFF;
}
#pager_container {
width:300px;
height:355px;
background-color:rgb(255,255,255);
float:left;
position:relative;
clear:both;
}
#arrow_left {
width:30px;
height:545px;
float:left;
background-image:url(../images/back.png);
z-index:600;
display:block;
position:absolute;
}
#arrow_right {
width:30px;
height:545px;
margin-left:670px;
background-image:url(../images/forward.png);
z-index:600;
display:block;
position:absolute;
}
.cycle-overlay {
font-family:'ColaborateRegular';
font-size:16px;
position: absolute;
bottom: 0;
width: 625px;
z-index: 600;
margin-left:30px;
background-color:rgba(0,0,0,0.4);
color:rgb(255,255,255);
padding: 15px 0 15px 15px;
}
#adv-custom-pager {
margin-right:auto;
margin-left:auto;
width:210px;
height:327px;
}
#adv-custom-pager a:link {
text-decoration:none;
text-decoration:underline none;
}
#audio {
float:left;
position:relative;
z-index:100;
width:300px;
height:20px;
}
img a {
border:none;
}
Any suggestions? I appreciate this!!!! Adam
