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 ????