[Solved] Css3 slideshow vs IE

[Baerspective]

If someone could help me that would be great.
I made a slide show using html5/css3 it works brilliantly in all browsers except for IE. I saw that one should add

<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

Is that going to cause an issue since I have declared the DOCTYPE to be html5?

[Baerspective]

thanks for your help. hope this link will take you to codepen where i inserted html and css

http://codepen.io/anon/pen/vEyLGq

i am having a bit of a hard time with codepen despite being logged in this is what it looks like in all other browsers

http://baerspective.com/alcan/

happy new year

[Senff]

The animations you have declared are specifically only for Webkit and Mozilla, so it makes sense that they won’t work on IE:

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;   
    -webkit-animation:cycle 25s linear infinite;        
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;     
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;       
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;        
}

[Baerspective]

Thanks so very much. I will change that right away.

[Baerspective]

i am not sure why its not working anymore?
this slideshow doesnt want to play in IE 9. any ideas?

it works fine in all browsers only IE is not doing its thing
http://baerspective.com/alcan/

.container {
    overflow:hidden;    
    position: relative;
    width: auto;
    padding: 2em 1.5em;
    color: rgba(0,0,0, 0.8);
    text-shadow: 0 1px 0 #fff;
    line-height:1.8;
    top: -5em;
    z-index:1;  
}

#content-slider {
    width:auto;
    height:382px;
    margin: 2px auto 0;
}

#slider {
    background:#000;
    border: 5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:382px;
    width:auto;
    margin:10px auto 0;
    overflow:visible;
    position:relative;
    z-index: 1;
    top: 1em;
    -o-border-radius: 2px 2px 2px 2px;
    -ms-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    -o-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -ms-box-shadow: 0 0 3px rgba(0,0,0, 0.2);   
    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

#slider:before, #slider:after {
    position: absolute;
    display:block;
    bottom:16px;
    width: 35%;
    height: 10px;
    content: " ";
    background: rgba(0,0,0,0.1);
    -o-border-radius: 25%;
    -ms-border-radius: 25%;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    border-radius: 25%;
    -o-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -ms-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); 
    z-index: -3;
}

#slider:before {
    left:0;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

#slider:after {
    right:0;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    transform: rotate(4deg);
}

#mask {
    overflow:hidden;
    height:380px;
}

#slider ul {
    margin:0;
    padding:0;
    position:relative;
}

#slider li {
    width:949px;
    height:382px;
    position:absolute;
    list-style:none;
    top: -384px;
}

#slider img {
    width:949px;
    height:382px;
    margin-left: -4em;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;   
    -webkit-animation:cycle 25s linear infinite;
    -ms-animation:cycle 25s linear infinite;
    -o-animation:cycle 25s linear infinite;
    animation:cycle 25s linear infinite;    
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;
    -ms-animation:cycletwo 25s linear infinite;
    -o-animation:cycletwo 25s linear infinite;
    animation:cycletwo 25s linear infinite;     
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
    -ms-animation:cyclethree 25s linear infinite;
    -o-animation:cyclethree 25s linear infinite;
    animation:cyclethree 25s linear infinite;   
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;
    -ms-animation:cyclefour 25s linear infinite;
    -o-animation:cyclefour 25s linear infinite;
    animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;
    -ms-animation:cyclefive 25s linear infinite;
    -o-animation:cyclefive 25s linear infinite;
    animation:cyclefive 25s linear infinite;        
}

[Baerspective]

i will move my query to the js forum as i understand there is no real solution for this to work in IE9 and older

[Author]

Posts