September 14, 201015 yr I have inherited the below script on a website & am trying to use a div containing text - inside an li. IE will not use a fade, it just snaps straight to the other div. If I use just an image (no div or text) it works fine? BUT i want it as text for SEO etc... Here is a simple test code (I need to keep it as ul & li) Please if anyone could test this out in IE, i will be grateful. <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML DIR="LTR" LANG="en"> <head> <title>testing</title> <style type="text/css"> #wrapper{ background: url("../BLANK-CENTRE.JPG") 100% 0 no-repeat; text-align:left; } #welcomebanner {margin: 0; padding: 0;} #welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;} #welcomebanner li {display: none;} #banner1 { width:603px; height:258px; position:relative; background:green; } #banner2 { width:603px; height:258px; position:relative; background:yellow; } #banner2 p{ background:yellow; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript"> var $j = jQuery; var welcomeBannerTimer; function nextSlide(){ var el = $j('#welcomebanner'); var slides = el.data('slides'); var c = el.data('slideIndex'); var n = ((c+1) >= slides.length)? 0 : c+1; el.data('slideIndex', n); $j(slides[c]).fadeOut(null, function(){ $j(slides[n]).fadeIn(); }); } function over(){ clearInterval(welcomeBannerTimer); } function out(){ welcomeBannerTimer = setInterval(nextSlide, 3000); } $j(window).load(function() { var el = $j('#welcomebanner'); var slides = $j('#welcomebanner>li'); if (slides.length < 2){ $j(slides[0]).show(); return; } el.data('slides', slides); el.data('slideIndex', 0); welcomeBannerTimer = setInterval(nextSlide, 3000); el.bind('mouseenter', over).bind('mouseleave', out); $j(slides[0]).show(); }); </script> </head> <body> <div id="wrapper"> <ul id="welcomebanner"> <li> <div id="banner2"> <p>kjhfkjshdfkjshdfkjsdhfk</p> <p>kjhfkjshdfkjshdfkjsdhfk</p> <p>kjhfkjshdfkjshdfkjsdhfk</p> <p>kjhfkjshdfkjshdfkjsdhfk</p> <p>kjhfkjshdfkjshdfkjsdhfk</p> <p>kjhfkjshdfkjshdfkjsdhfk</p> </div> </li> <li> <div id="banner1"> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> <p>abcabdcbabcbabc b abcabdcbabcbabc b,</p> </div> </li> </ul> </div> </body> </html>
September 15, 201015 yr If IE doesn't like a div inside an li tag (nor do I), have you tried the text without the div and transferred the styles to the p tags as a class? <li> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> <p class="banner2">kjhfkjshdfkjshdfkjsdhfk</p> </li> CSS .banner2 { width:603px; height:20px; position:relative; background:yellow; } /*#banner2 { width:603px; height:258px; position:relative; background:yellow; } #banner2 p{ background:yellow; } */ Edit the height (I guessed 20px;).
September 15, 201015 yr Author Thanks for reply, I have used p instead of div now but... I think it is the position:relative or absolute etc.. that is causing the problem.... If I take out positioning it fades ok? But how do I position my text - as I want it positioned over an image.? I can't add the picture with css as again IE will not fade it. So I was using absolute position of the text over the top of an img... Any ideas?
Create an account or sign in to comment