S
Simmy
Guest
This is the page we're working on - Here. It works perfectly on IE9, FF, Opera, Safari. But IE8 and below is a no go.
IE8 doesn't display the info divs and doesn't even show the orange borders like every other browser. We're using the latest jQuery, we've tried z-index for everything as IE7/8 seems to have a problem with that. Infact the list of things we've tried is so long and some are so random that we're now out of ideas. Please shed some light on this!
This is the code so far
IE8 doesn't display the info divs and doesn't even show the orange borders like every other browser. We're using the latest jQuery, we've tried z-index for everything as IE7/8 seems to have a problem with that. Infact the list of things we've tried is so long and some are so random that we're now out of ideas. Please shed some light on this!
This is the code so far
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SMG Computers</title>
<script language="javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script language="javascript" src="jquery-1.5.js"></script>
<!-- Rounded Corner jQuery Start -->
<script language="javascript" src="jquery.corners.js"></script>
<script language="javascript" >
$(document).ready(function(){
$("#container").corner();
$("#leftDIV").corner();
$("#middleDIV").corner();
$("#rightDIV").corner();
$(".caption").corner();
$(".heading").corner();
});
</script>
<!-- Dropdown Info Divs jQuery Starts -->
<script language="javascript" src="jquery.easing.1.3.js"></script>
<style type="text/css">
* {
text-decoration:none;
}
body {
background-image:url(background.jpg);
background-repeat:repeat-x;
}
#logoDIV {
margin: 0 auto;
width: 800px;
}
#logoImage {
position:absolute;
margin-left:550px;
margin-top:-150px;
}
#container {
margin: 0 auto;
width: 800px;
margin-top: 200px;
height: 252px;
background-color:#FFF;
padding: 20px;
z-index:100;
}
#leftDIV {
width: 250px;
height: 250px;
border: 2px solid #F60 !important;
float: left;
margin-right: 19px;
background-image:url("IT Support.jpg");
cursor:pointer;
float:left;
z-index:200 !important;
}
#middleDIV {
width: 250px;
height: 250px;
border: 2px solid #F60 !important;
float: left;
margin-right: 19px;
background-image:url("PCRepair.jpg");
cursor:pointer;
float:left;
z-index:200 !important;
}
#rightDIV {
width: 250px;
height: 250px;
border: 2px solid #F60 !important;
float: left;
background-image:url("WebDesign.jpg");
cursor:pointer;
float:left;
z-index:200 !important;
}
.photo {
position:relative;
font-family:arial;
overflow:hidden;
width:350px;
height:233px;
z-index:150 !important;
}
.heading, .caption {
position:absolute;
background:#000;
height:50px;
width:200px;
margin-left: 25px;
border: 2px #f60 solid;
z-index:175 !important;
}
.heading {
top:-60px;
}
.caption {
bottom:-60px;
}
.heading span {
color:#F60;
text-align:center;
top:-60px;
font-weight:bold;
display:block;
padding:15px 0 0 10px;
z-index:175 !important;
}
.caption span {
color:#F60;
font-size:12px;
display:block;
padding:5px 10px 0 10px;
text-align:center;
z-index:175 !important;
}
</style>
</head>
<body>
<div id="logoDIV"><img id="logoImage" src="SMGcomputersLogo.gif" width="265" height="90" /></div>
<div id="container"> <a href="http://www.smg-bristolitsupport.co.uk/" target="_blank">
<div id="leftDIV" class="photo">
<div class="heading"><span>IT Support</span></div>
<div class="caption"><span>World class leading IT Support from the Bristol boys!</span></div>
</div>
</a> <a href="http://www.bristolcomputerrepair.co.uk/" target="_blank">
<div id="middleDIV" class="photo">
<div class="heading"><span>Computer Repair</span></div>
<div class="caption"><span>Computer repair for home users!</span></div>
</div>
</a> <a href="http://www.bristolwebsitedesign.co.uk/" target="_blank">
<div id="rightDIV" class="photo">
<div class="heading"><span>Web Design</span></div>
<div class="caption"><span>Web Design!</span></div>
</div>
</a> </div>
<script>
$("#leftDIV").hover(
function () {
// transition effect
style = 'easeOutQuart';
document.getElementById("middleDIV").style.backgroundImage = "url(PCRepairGrey.jpg)";
document.getElementById("rightDIV").style.backgroundImage = "url(WebDesignGrey.jpg)";
$(this).children('div:first').stop(false,true).animate({top:20},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:20},{duration:200, easing: style});
},
function () {
// transition effect
style = 'easeOutQuart';
document.getElementById("middleDIV").style.backgroundImage = "url(PCRepair.jpg)";
document.getElementById("rightDIV").style.backgroundImage = "url(WebDesign.jpg)";
$(this).children('div:first').stop(false,true).animate({top:-60},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-60},{duration:200, easing: style});
$(this).corner();
}
);
$("#middleDIV").hover(
function () {
// transition effect
style = 'easeOutQuart';
$(this).children('div:first').stop(false,true).animate({top:20},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:20},{duration:200, easing: style});
document.getElementById("leftDIV").style.backgroundImage = "url(ITSupportGrey.jpg)";
document.getElementById("rightDIV").style.backgroundImage = "url(WebDesignGrey.jpg)";
},
function () {
// transition effect
style = 'easeOutQuart';
document.getElementById("leftDIV").style.backgroundImage = "url('IT Support.jpg')";
document.getElementById("rightDIV").style.backgroundImage = "url(WebDesign.jpg)";
$(this).children('div:first').stop(false,true).animate({top:-60},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-60},{duration:200, easing: style});
$(this).corner();
}
);
$("#rightDIV").hover(
function () {
// transition effect
style = 'easeOutQuart';
document.getElementById("leftDIV").style.backgroundImage = "url(ITSupportGrey.jpg)";
document.getElementById("middleDIV").style.backgroundImage = "url(PCRepairGrey.jpg)";
$(this).children('div:first').stop(false,true).animate({top:20},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:20},{duration:200, easing: style});
},
function () {
// transition effect
style = 'easeOutQuart';
document.getElementById("leftDIV").style.backgroundImage = "url('IT Support.jpg')";
document.getElementById("middleDIV").style.backgroundImage = "url(PCRepair.jpg)";
$(this).children('div:first').stop(false,true).animate({top:-60},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-60},{duration:200, easing: style});
$(this).corner();
}
);
</script>
</body>
</html>
Last edited by a moderator: