jQuery slider problems, plus problems with IE
Hey everyone. I'm making a portfolio and it works fine in Firefox however IE is causing me some massive problems.
Visit the website here
This is the source code for each of the pages:
index.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>Caitlin-Helbig.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slider.js"></script>
<link href="sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="portfolio">
Portfolio here
</div>
<div id="skills">
Skills here
</div>
<div id="education">
Education here
</div>
<div id="workhistory">
Work History here
</div>
<div id="contact">
Contact here
</div>
<div id="links">
<div class="box1">
<div class="box1">
<div class="box1">
<div class="slide"><a href="#" class="button1">Portfolio</a></div>
</div>
<div class="box2">
<div class="slide"><a href="#" class="button2">Skills</a></div>
</div>
</div>
<div class="box2">
<div class="box1">
<div class="slide"><a href="#" class="button3">Education</a></div>
</div>
<div class="box2">
<div class="slide"><a href="#" class="button4">Work History</a></div>
</div>
</div>
</div>
<div class="box2">
<div class="slide"><a href="#" class="button5">Contact</a></div>
</div>
</div>
<div id="space1"> </div>
<div id="title"><img src="images/title.png" alt="title" id="titleimage"/></div>
<div id="contents">Contents here</div>
</body>
</html>
sheet.css
-
body {
background: url("images/background.jpg") repeat-x #dbdbdb;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
font-family: tahoma, arial, sans-serif;
font-size: 12px;
width: 825px;
}
img#titleimage {
position: absolute;
bottom: 0px;
right: 10px;
}
#links {
width: 825px;
height: 55px;
}
#space1 {
width: 800px;
height: 120px;
}
#title {
float: left;
width: 398px;
height: 195px;
text-align: right;
padding-right: 2px;
position: relative;
}
#contents {
float: right;
width: 340px;
height: 195px;
padding-top: 4px;
padding-right: 60px;
}
.box1 {
float: left;
}
.box2 {
float: right;
}
a:focus {
outline: none;
}
#portfolio, #skills, #education, #workhistory, #contact {
background: #ffffff;
height: 450px;
display: none;
padding-left: 10px;
padding-right: 10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 8px #000000;
background: url(images/link.png) no-repeat center top;
}
.button1,.button2,.button3,.button4,.button5 {
text-align: center;
width: 155px;
height: 46px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font-family: Tahoma, Arial, sans-serif;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
slider.js
-
$(document).ready(function(){
$(".button1").click(function(){
$("#portfolio").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(document).ready(function(){
$(".button2").click(function(){
$("#skills").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(document).ready(function(){
$(".button3").click(function(){
$("#education").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(document).ready(function(){
$(".button4").click(function(){
$("#workhistory").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(document).ready(function(){
$(".button5").click(function(){
$("#contact").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
Does anyone have any ideas on how to fix the IE problem?
The other thing I want to do is I want my slider to cover the content on the main page when it is clicked, rather than push it down, and I don't want the user to be able to click more than one link at a time like they currently can now. Can someone help me achieve this?
Thanks!!!