Click here to Skip to main content
15,892,674 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I had developed a simple CSS image slider, but its giving me a problem.

this CSS is working fine in mozilla firefox but give me problem when i run the same page on internet explorer. everything get messed up.

below is my code:

style sheet code is as follows:

CSS
body {
text-align: center;
}
#images {
width: 500px;
height: 250px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 500px;
height: 250px;
position: absolute;
top: 0;
left: -500px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #11ED44;
border: 1px solid #00000;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #CC3B2B;


test.html page code:


<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>


<img id="image1" src="01.jpg" />
<img id="image2" src="02.jpg" />
<img id="image3" src="03.jpg" />
<img id="image4" src="04.jpg" />


1
2
3
4




</body>
</html>
Posted
Comments
ZurdoDev 19-Feb-13 7:54am    
What version of IE? I'm pretty sure IE8 and before (I don't know about later) does not support things like webkit.

1 solution

According to all I have read, Internet Explorer does not support the transition property. See
[Here]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900