title: Explorer and FADING IMAGES IN OVERLAYING DIV'S problem
body: <p>Why isn't the overlaying image (in nested div) fading along with the parent div? Problem only in EXPLORER..</p>
  
  <p>See the 'recent' labels on the portfolio items: <a href="http://www.idvisual.nl/temp/IDVISUALV3/" rel="nofollow noreferrer">My website</a></p>
  
  <p>Switch category's in the navigation to see that the 'recent' labels don't fade in Internet-Explorer</p>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;div class="art recent"&gt;
     &lt;div class="recentlabel"&gt;&lt;img src="images/Recent-label.png" /&gt;&lt;/div&gt;
      &lt;a href="images/art/1.jpg" rel="lightbox" title=""&gt; &lt;img border="0" src="images/art/1tn.jpg" width="190" height="263" /&gt;&lt;/a&gt;&lt;p&gt;ARTIST&lt;br /&gt;     artwork&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This the css:</p>
  
  <pre><code>.art  {
     width: 190px;
     padding: 0px;
     margin: 5px;
     float: left;
     background:#2c313b;
     display: inline;
      -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  
  .recentlabel {
   position:absolute;
   margin-top:-2px;
   margin-left:97px;
   width:95px;
   height:95px;
  }
  
  .recent {
  }
  </code></pre>
  
  <p>And this is the jquery:</p>
  
  <pre><code>var $j = jQuery.noConflict();$j(document).ready(function(){    
      $j(".art").css({opacity: 0});   // Loaded at 0 opacity
      $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%
  
      $j(".art").hover(function(){
    if(!$j(this).hasClass("hidden")){
      $j(this).fadeTo("fast", 1.0); }  // Rollover at 100%
      },function(){
    if(!$j(this).hasClass("hidden")){
      $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
      });
  });
  </code></pre>
  
  <p>Please help! I can't figure it out..
  PS: I have little experience with jQuery/Javascript, so please explain clearly.. Thanks!</p>
  
  <p><strong>-- EDIT --</strong>
  And the jquery category switcher code below:</p>
  
  <pre><code>$(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 &gt; div').each(function() {                                
                  if(!$(this).hasClass(filterVal)) {      
                      $(this).fadeTo('slow' ,0.08).addClass('hidden');
  
                  } else {
                      $(this).fadeTo('slow' ,0.8).removeClass('hidden');
                  }
              });
          }
          return false;
      });
  });
  </code></pre>
  
  <p><strong>-- Edit --</strong>
  The code for the navigation category filter with '0.99' for the 'recentlabel' transparency:</p>
  
  <pre><code>if(filterVal == 'alles') {
              $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');
              $('.recentlabel').fadeTo(400, 0.99);
  
          } else {
  
  
              $('.wrap .masonryWrap &gt; div').each(function() {                                
                  if(!$(this).hasClass(filterVal)) {      
  
      $(this).fadeTo('slow' ,0.08).addClass('hidden');  
  
      if (filterVal!='recent') 
        $(this).find('.recentlabel').fadeTo(400, 0);
      } else {  
        $(this).fadeTo('slow' ,0.8).removeClass('hidden');  
        $(this).find('.recentlabel').fadeTo(400, 0.99);  
      }
  </code></pre>