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.
精彩评论