slideshow not working in ie8
Hi
I have created a slideshow using:
jquery.easing.1.2.js
jquery.slideviewer.1.1.js
It's working well in all browsers but in IE8 it's not staying within the div and breaks out horizontaly, really stuck as to what's wrong as i'm new to jquery as of today, any help would be greatly appreciated.
here is the page in question:
http://www.39stepsstudio.com/test/casestudies.html
My html
-
<!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>39steps</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script src="effects/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="effects/jquery.easing.1.2.js" type="text/javascript"></script>
<script src="effects/jquery.tooltip.js" type="text/javascript"></script>
<script src="effects/jquery.slideviewer.1.1.js" type="text/javascript"></script>
<script src="effects/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="effects/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygaltop").slideView({
easeFunc: "easeInOutSine",
easeTime: 900
});
// chili syntax highlighter
$("code").chili();
});
ChiliBook.automatic = false;
ChiliBook.recipeFolder = "/";
ChiliBook.stylesheetFolder = "/";
</script>
<script type="text/javascript">
$(function() {
$('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
$('<p><a href="#">Disable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
$(this).parents('div').eq(1).disableTab(3);
return false;
});
$('<p><a href="#">Activate third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
$(this).parents('div').eq(1).triggerTab(3);
return false;
});
$('<p><a href="#">Enable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
$(this).parents('div').eq(1).enableTab(3);
return false;
});
});
</script>
</head>
<!--[if lte IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<style type="text/css">
.burger {
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/clip.png", sizingMethod="scale");
}
</style>
<![endif]-->
<body>
<div id="logo"></div>
<div id="wrapper">
<!-- start #content -->
<div id="content">
<div id="casestudiesimage">
<div id="mygaltop" class="svw">
<ul>
<li><img alt="1" src="images/casestudies/01.jpg" /></li>
<li><img alt="2" src="images/casestudies/02.jpg" /></li>
<li><img alt="3" src="images/casestudies/03.jpg" /></li>
</ul>
</div>
</div>
<!-- start #Navigation -->
<div id="topholder">
<div id="top"></div>
<div id="navigationholder">
<ul id="nav">
<li id="nav-home"><a href="index.html">Home</a></li>
<li id="nav-news"><a href="news.html">News</a></li>
<li id="nav-casestudies"><a href="casestudies.html" class="active">Case studies</a></li>
<li id="nav-services"><a href="services.html">Services</a></li>
<li id="nav-team39"><a href="team39.html">Team39</a></li>
<li id="nav-profile"><a href="profile.html">Profile</a></li>
<li id="nav-contact"><a href="contact.html">Contact</a></li>
</ul></div>
</div>
<!-- end #navigation -->
<!-- end #section -->
<div id="section">
<div class="post">
<div class="story">
<h1 class="casestudiesheading"><span class="full">Case Studies</span></h1>
<table id="subnavtable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#">HR Network</a></td>
<td><a href="#">Wannaburger</a></td>
<td><a href="#">Scottish SPCA</a></td>
<td><a href="#">FSB Scotland</a></td>
</tr>
<tr>
<td><a href="#">MS Society Scotland</a></td>
<td><a href="#">case study 06</a></td>
<td><a href="#">case study 07</a></td>
<td><a href="#">case study 08</a></td>
</tr>
<tr>
<td><a href="#">case study 09</a></td>
<td><a href="#">case study 10</a></td>
<td> </td>
<td> </td>
</tr>
</table>
<p><img src="images/divider_large.gif" alt="Divider" /></p>
<h2>MS Society</h2>
<div id="container-5">
<ul>
<li><a href="#casestudy"><span>Case study</span></a></li>
<li><a href="#testimonial"><span>Testimonial</span></a></li>
</ul>
<div id="casestudy">
<p> development of the new site. The new site will give more information to businesses on just how easy it is to recycle, as well as promoting valuable new services.</p>
<p>Tom Kenny, Head of Commercial Operations at LEEP, stated, “With almost 2,000 recycling customers LEEP Recycling engages with a wide cross section of the Edinburgh business community. When we went out to tender, competitive 39steps </p>
<p>Tom Kenny, Head of Commercial Operations at LEEP, stated, “With almost 2,000 recycling customers LEEP</p>
</div>
<div id="testimonial">
<p> "development of the new site. The new site will give more information to businesses on just how easy it is to recycle, as well as promoting valuable new services.</p>
<p>Tom Kenny, Head of Commercial Operations at LEEP, stated, “With almost 2,000 recycling customers LEEP Recycling engages with a wide cross section of the Edinburgh business community. When we went out to tender, competitive 39steps" </p>
</div>
</div>
</div>
</div>
</div>
<!-- end #section -->
<!-- start #footer -->
<div id="footer">
<div id="legal">39steps, 22 Fleshmarket Close, Edinburgh, EH1 1DY <strong>T:</strong> 0131 220 3851<a href="mailto:rendezvous@39stepsstudio.com"></a><br/>
All content © 39steps 2008 | Registered in Scotland no SC255951 | Registered office as above<br/>
<br />
<a href="#">Join our mailing list</a> | <a href="#">Visit our blog</a></div>
</div>
<!-- end #footer -->
<div style="clear: both;"> </div>
</div>
</div>
<!-- end #content -->
</body>
</html>
and my css
-
*{margin: 0; padding: 0}
body {
margin: 0;
padding: 0;
background: #333333 url(images/background.jpg) repeat-x;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
line-height: 16px;
color: #ffffff;
}
h1, h3{
padding-top: 30px 0px 0px 0px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
}
h2 {
margin: 0px 0px 15px 0px;
padding-left: 0px;
font-size: 18px;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
}
h3 {
font-size: 14px;
font-weight: 200;
font-family: Helvetica, Arial, sans-serif;
}
p {
margin: 0px 0px 15px 0px;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ffba00;
}
a:visited {
text-decoration: none;
color: #666666;
}
/*---------------------------------------- WRAPPER -------------------------------------*/
#wrapper {
}
/*---------------------------------------- HEADER -------------------------------------*/
#header {
width: 494px;
height: 163px;
margin: 0 0;
padding: 0px 0px 15px 0px;
float: left;
}
#logo {
position:absolute;
left:30px;
top:86px;
width:277px;
height:97px;
z-index:1;
background-image: url(images/logo.png);
}
/*---------------------------------------- CONTENT -------------------------------------*/
#content {
width: 955px;
margin: 0 0;
}
/*---------------------------------------- top holder -------------------------------------*/
/* Posts */
#topholder {
float: right;
width: 461px;
}
#top{
width: 461px;
height: 134px;
}
/*---------------------------------------- SECTION -------------------------------------*/
#section {
float: right;
width: 461px;
padding: 0px 0px 0px 0px;
background-color: #2a2a2a;
height: 462px;
}
#section .post {
padding-bottom: 0px;
height: 462px;
}
#section .story {
padding: 0px 25px 0px 25px;
height: 462px;
}
/*---------------------------------------- HERO IMAGE -------------------------------------*/
#heroimage {
float: left;
width: 494px;
height: 672px;
}
#casestudiesimage {
float: left;
width: 494px;
height: 470px;
margin: 170px 0px 0px 0px;
}
#casetop{
float: left;
width: 494px;
height: 163px;
}
/*---------------------------------------- MENU -------------------------------------*/
#navigationholder {
width: 461px;
height: 36px;
float: right;
}
#navigation{
position:absolute;
left:556px;
top:134px;
width:398px;
height:36px;
z-index:2;
}
ul#nav {
position: relative;
height: 36px;
width: 461px;
margin: 0px;
}
ul#nav li {
float: left;
list-style: none;
}
ul#nav li a {
position: absolute;
text-indent: -9999px;
text-decoration: none;
border: none !important;
top: 0; height: 36px;
}
ul#nav li#nav-home a {
left: 0; width: 106px;
background: url("images/navigation.jpg") no-repeat;
}
ul#nav li#nav-news a {
left: 106px; width: 45px;
background: url("images/navigation.jpg") -106px 0 no-repeat;
}
ul#nav li#nav-casestudies a {
left: 151px; width: 85px;
background: url("images/navigation.jpg") -151px 0 no-repeat;
}
ul#nav li#nav-services a {
left: 236px; width: 60px;
background: url("images/navigation.jpg") -236px 0 no-repeat;
}
ul#nav li#nav-team39 a {
left: 296px; width: 58px;
background: url("images/navigation.jpg") -296px 0 no-repeat;
}
ul#nav li#nav-profile a {
left: 354px; width: 50px;
background: url("images/navigation.jpg") -354px 0 no-repeat;
}
ul#nav li#nav-contact a {
left: 404px; width: 57px;
background: url("images/navigation.jpg") -404px 0 no-repeat;
}
ul#nav li#nav-home a:hover { background-position: -0px -36px; }
ul#nav li#nav-news a:hover { background-position: -106px -36px; }
ul#nav li#nav-casestudies a:hover { background-position: -151px -36px; }
ul#nav li#nav-services a:hover { background-position: -236px -36px; }
ul#nav li#nav-team39 a:hover { background-position: -296px -36px; }
ul#nav li#nav-profile a:hover { background-position: -354px -36px; }
ul#nav li#nav-contact a:hover { background-position: -404px -36px; }
ul#nav li#nav-home a.active { background-position: -0px -72px; }
ul#nav li#nav-news a.active { background-position: -106px -72px; }
ul#nav li#nav-casestudies a.active { background-position: -151px -72px; }
ul#nav li#nav-services a.active { background-position: -236px -72px; }
ul#nav li#nav-team39 a.active { background-position: -296px -72px; }
ul#nav li#nav-profile a.active { background-position: -354px -72px; }
ul#nav li#nav-contact a.active { background-position: -404px -72px; }
/*---------------------------------------- SUB NAVIGATION -------------------------------------*/
#subnavtable{
color:#666666;
width:411px;
margin:0px 0px 0px 0px;
font-size: 12px;
}
#subnavtable td{
color:#666666;
padding:5px 0px 5px 0px;
}
#team39navtable{
color:#666666;
margin:0px 0px 0px 0px;
font-size: 12px;
}
#team39navtable td{
color:#666666;
padding:5px 15px 5px 0px;
}
/*---------------------------------------- SECTION HEADINGS -------------------------------------*/
h1 {
padding: 30px 0px 10px 0px;
}
h1 span {
position: relative;
display: block;
height: 27px; width: 350px;
text-indent: -9999px;
}
h1 span.full {
width: 411px !important;
}
h1.homeheading span { background: url("images/heading_home.gif") no-repeat;}
h1.newsheading span { background: url("images/heading_news.gif") no-repeat;}
h1.casestudiesheading span { background: url("images/heading_casestudies.gif") no-repeat;}
h1.servicesheading span { background: url("images/heading_services.gif") no-repeat;}
h1.team39heading span { background: url("images/heading_team39.gif") no-repeat;}
h1.profileheading span { background: url("images/heading_profile.gif") no-repeat;}
h1.contactheading span { background: url("images/heading_contact.gif") no-repeat;}
#intro{
margin: 130px 0px 0px 0px;
}
/*---------------------------------------- FOOTER -------------------------------------*/
#footer {
padding: 30px 0 0px 0;
float: right;
}
#footer p {
width: 750px;
color: #969292;
}
#footer a {
background: none;
font-weight: normal;
color: #969292;
text-decoration: none;
}
#footer a:hover {
text-decoration: none;
color: #ffffff;
}
#legal {
width: 461px;
margin: 0 0;
text-align: right;
font-size: 11px;
color: #969292;
}
/*---------------------------------------- SLIDEVIEWER -------------------------------------*/
/* slideViewer 1.0 default styles */
.svw {
width: 50px;
height: 50px;
}
.svw ul{
position: relative;
left: -999em;
}
.stripViewer { /* this is the DIV container for your UL of images */
position: relative;
overflow: hidden;
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li { /* each image is arranged horizontally */
float:left;
}
.stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
overflow: auto;
width: 1%;
}
.stripTransmitter ul { /* the auto-generated set of links */
position:absolute;
left:404px;
top:345px;
list-style-type: none;
}
.stripTransmitter ul li{ /* in this list too, each LI is arranged horizontally */
width: 30px;
float:left;
margin: 0 0px 1px 0;
}
.stripTransmitter a{ /* the links. */
font: bold 10px Helvetica, Arial, sans-serif;
text-align: center;
line-height: 22px;
background: #ffba00;
color: #ffffff;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover { /* hover */
background: #ebb606;
color: #ffba00;
}
.stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #2a2a2a;
color: #ebb606;
}
/* end slideViewer default styles */
code {
width:93%;
font: normal 1em/1.3em 'Courier New', Courier, Fixed;
color: #333333;
display: block;
padding: 0;
margin: 0;
background-color: #fff;
white-space: pre;
overflow-x: auto;
}
/*---------------------------------------- TABS -------------------------------------*/
/*
Tabs - additional IE specific bug fixes
Recommended usage (Conditional Comments):
[if lte IE 7]>
<link rel="stylesheet" href="tabs_ie.css" type="text/css" media="projection, screen" />
<![endif]
*/
.tabs-nav { /* auto clear */
display: inline-block;
}
.tabs-nav .tabs-disabled {
position: relative; /* fixes opacity */
filter: alpha(opacity=40);
}
.tabs-nav .tabs-disabled a span {
_height: 19px; /* for some reason the height is 1px to less with opacity... */
min-height: 19px; /* ...in both IE 6 and 7 */
}
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.tabs-nav {
display: none;
}
}
/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 0px;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #666666;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
text-align: left;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
color: #ffffff;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 6px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
padding: 10px 0px 0px 0px;
background: #2a2a2a; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
padding: 0 0 0 20px;
background: url(images/loading.gif) no-repeat 0 50%;
}
/*tooltips formatting*/
#tooltip {
background: #fff;
color: #000;
opacity: 0.85;
border: 5px solid #dedede;
}
#tooltip h3 {
font: normal 10px Verdana;
margin: 0;
padding: 6px 2px;
border: 0;
}