asked on

Jquery fadein Blinking in IE8 browser due to Doctype

I have a slide show that I have created using jquery's fadein/fadeout.
It works in all browsers except Internet Explorer 8

Problem: ( IE8 only )
The images are blinking instead of fading in and out

Work done:
I know it has to do with the Doctype, because if i remove it, the jquery works fine.
But then the CSS Styles will not work.

So if I have the Doctype - CSS works / Jquery does not
If I dont have the Doctype - Jquery works / CSS does not

I have tried all types of transitional/strict Doctypes, none of them works.

Anyone have a solution or simple Jquery Fadein/Fadeout for this?

All I am trying to do is have a simple .fadein/.fadeout of 4 images using Jquery.

Thanks in advance

<!DOCTYPE>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('.fadein p:gt(0)').hide();setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 
<!--change speed-->
    1000
<!--change speed-->
);});
</script>

<style>
#page{margin:0 auto;padding:1%;width:90%;background:red;min-height:450px;}
#left{float:left;width:48%;background:blue;}
#right{float:right;width:48%;background:lime}
.fadein { position:relative;}
.fadein p { position:absolute;top:0;right:0;bottom:0;left:0;}
.fadein img {width:100%;max-height:350px;}
</style>

<p>top of webpage here</p>

<div id="page">
<div id="left">hello lefty</div>
<div id="right">
<div class="fadein">
<p><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></p>
<p><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></p>
<p><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">image3</p>
</div></div>
</div>


<p>bottom of page here</p>

Open in new window

Dave Baldwin

If that is your actual web page, there are many things wrong with it. Incomplete DOCTYPE, no <head> section, no <body> section. This is what it should be at a very minimum for it to work predictably.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('.fadein p:gt(0)').hide();setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 
<!--change speed-->
    1000
<!--change speed-->
);});
</script>

<style>
#page{margin:0 auto;padding:1%;width:90%;background:red;min-height:450px;}
#left{float:left;width:48%;background:blue;}
#right{float:right;width:48%;background:lime}
.fadein { position:relative;}
.fadein p { position:absolute;top:0;right:0;bottom:0;left:0;}
.fadein img {width:100%;max-height:350px;}
</style>
</head>
<body>
<p>top of webpage here</p>

<div id="page">
<div id="left">hello lefty</div>
<div id="right">
<div class="fadein">
<p><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></p>
<p><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></p>
<p><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">image3</p>
</div></div>
</div>

<p>bottom of page here</p>
</body>
</html>

Open in new window

webdott

ASKER

Thanks for that. I was showing the stripped down code.

Even with the complete code in, it does not work.
The CSS works, but the fadein jquery BLINKS instead of FADING

If I remove the <!DOCTYPE html>
the JQUERY FADEIN/OUT works
but the CSS does not work

The problem I am trying to solve is for them Both to work.

Thanks, but that does not fix the problem.

Dave Baldwin

I doubt that we can provide a solution with what you have shown us. Can you give us a link to the page so we can check it out?

PS: I just noticed you said Internet Explorer 8. IE8 does not support the HTML5 DOCTYPE. You will need to use an earlier DOCTYPE if that is important. http://www.w3.org/QA/2002/04/valid-dtd-list.html

ASKER CERTIFIED SOLUTION

webdott

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webdott

ASKER

thanks