I created a simple site using YUI to create nice animated image galleries. All browsers work fine, but IE7. I download YUI from yahoo servers as recommended. When I load the page for the first time (or hit F5 to refresh), all images disappear as soon as the onload event is fired. Even if I don't run javascript at all and use the YUI library, all my img tags will disappear and not be visible. However, I can access them using javascript code, and it really does not break my code or cause any exceptions.
The problem is also partially related to CSS - if you try to comment on a style tag, the images will no longer disappear.
These are the parts of the page source that still make up the web page that replicates this problem:
<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Title</title> <style type="text/css"> body, div, table {font-family:Arial,Helvetica,Garuda,sans-serif; color:#777; font-size:14px;} table {padding:0; margin:0; border-spacing:0;} td {padding:0; margin:0} img {border-style:none; padding:0} #div-main {margin:0 auto; width:970px; position:relative; overflow:hidden} #div-main-content {position:relative;} #table-page-content {width:100%; height:374px;} #td-main-image {vertical-align:top; width:609px; height:374px; padding:0px;} img.img-main {width:609px; height:374px;} #td-main-text {vertical-align:top; text-align:left; padding-right:40px;} #div-gallery-container {width:609px; height:374px; overflow:hidden; position:relative;} #div-gallery-content {position:absolute; top:0; left:0;} #div-gallery-content div {width:609px; height:374px;} #div-gallery-content img {width:609px; height:374px} </style> </head> <body> <div id="div-main"> <div id="div-main-content"> <table id="table-page-content"> <tr> <td id="td-main-text"> some text </td> <td id="td-main-image" rowspan="1"> <div id="div-gallery-container"> <div id="div-gallery-content"> <div><img src="images/slideshow-01.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-02.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-03.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-04.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-05.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-06.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-07.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-08.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-09.jpg" class="img-main" alt="image" /></div> <div><img src="images/slideshow-10.jpg" class="img-main" alt="image" /></div> </div> </div> </td> </tr> </table> </div> </div> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js" type="text/javascript"></script> </body> </html>
Please help me fix this problem.
Jakub source share