开发者

IE8 trouble with images

I can't understand the reason of this trouble: I'm using image slider and everything works nice except IE8.

Here is the site: link.

    <div id="slides">
        <div class="slides_container">
            <?php
                foreach($images as $image)
                   echo "<a href='#'><img style='margin: 0 auto; z-index: 9999;' src='{$image}' /></a>";
            ?>
        </div>
        <a href="#" class="prev"><img src="images/prev.png" width="45" height="52" alt="Arrow Prev"></a>
         <a href="#" class="next"><img src="images/next.png" width="45" height="52" alt="Arrow Next"></a>
    </div>


#slides {
    position:absolute;
    top:15p开发者_开发技巧x;
    left:4px;
    z-index:100;
}


.slides_container {
    margin-top: 30px;
    width:765px;
    height: 350px;
    overflow:hidden;
    position:relative;
    display:none;
}


.slides_container a {
    width:765px;
    height:350px;
    display:block;
}

.slides_container a img {
    display:block;
}

So, in Chrome, Firefox, etc I see images in slider, but in IE8 I don't see any images. Can you help me to find the trouble?

p.s. I can't check it under IE8 because I have Linux. I just know it doesn't work there.


The HTML code being generated inside the "slides_container" DIV is as follows:

<div class="slides_container">
   <a href='#'>
      <img style='margin: 0 auto; z-index: 9999;' src='images/gallery/home/pic29.jpg'></img>
   </a>
</div>

As you can see, the image tag is not rendered correctly. It should be without a closing

</img>

tag.

Once this is fixed, it will work in Internet Explorer.


First of all, my suggestion, as I usually run this, is to create the script using <li> floated to the left.

$(".next").click(function()
    {
    var current = $(".active"),
    next = current.next(".inactive");

if(next.length > 0) { // there exists a next element
    current.add(next)
      .toggleClass("active inactive")
    offset_v = offset_v - 765;
      $("#slides_container ul").animate({left: offset_v}, 500);
        }
    });

with your php, set your 1st element as .active and all the other ones, parse as .inactive, and that's it.

rinse and repeat for the previous picture aswell.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜