tags:

views:

200

answers:

0

Hello!

Why isn't the div inside a fading div -fading along in Explorer? Firefox and safari doesn't seem to have a problem with it.

See project here: http://www.idvisual.nl/temp/IDVISUALV3/

See the portfolio items with the label 'Recent'. Click on a category in the navigation to fade. The label doesn't fade to a low opacity when the containing div does fade (Explorer).

This is the jquery for the category filter (navigation):

$(document).ready(function() {  

    $('ul#navfilter a').click(function() {

        $(this).css('outline','none');
        $('ul#navfilter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');      

        if(filterVal == 'alles') {
            $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');

        } else {

            $('.wrap .masonryWrap > div').each(function() {                                
                if(!$(this).hasClass(filterVal)) {      
                    $(this).fadeTo('slow' ,0.08).addClass('hidden');

                } else {
                    $(this).fadeTo('slow' ,0.8).removeClass('hidden');
                }
            });
        }
        return false;
    });
});

And this is what one of the 'recent project' div's looks like:

<div class="art recent">
    <div class="recentlabel"><img src="images/Recent-label.png" /></div>
    <a href="images/art/1.jpg" rel="lightbox" title=""> <img border="0" src="images/art/1tn.jpg" width="190" height="263" /></a><p>ARTIST<br />artwork</p>
    </div>

Can somebody help me out here?

thanks!

--- EDIT ---

I see it has something to do with the absolute positioned DIV the 'recent label' is in. When i delete 'position:absolute;' from the css, the fade works in IE, but then the div isn't in the right place.. Any idea how i can get the inner div on top of the image below? (z-index:999; doesn't work) Or does anybody have another solution for the whole fade thing ????