Question

The following works in FF, Chrome and Safari:

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().fadeTo("slow", 0.30);
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

But doesn’t in IE8 (I am not even testing in 7 and earlier).

How do I achieve this functionality in IE8 ?

Edit: By popular request here is the HTML:

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

    <div style="clear:both"></div>

    <div id="edit-image-nav">
        <div id="add_comment"><img src="images/comment-icon.png" /></div>
        <div id="like"><img src="images/paint-icon.png" /></div>
        <div id="delete_img"><img src="images/delete-icon.png" /></div>
    </div>  

Please note that what happens is, when you click on one of the icons in the ‘edit-image-nav’ div (which are overlayed on the images in the UL above onHover), it has different functionality. For the other icons, it works. For the #delete_img however, it does not.

Answer 1

It doesn’t seems to be an error in your code, but if it really doesn’t work try this:

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() {
                   $(this).css('opacity', 0.3);
            } );
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});