title: Blinking/flashing images in firefox
body: <p>My images are blinking when I mouse-over in Firefox.  They work fine on chrome and safari.  </p>
  
  <p>I think I've narrowed it down to the  tag that wraps the images, but I don't know why it would cause that problem. (The left image does not have an  tag around them and it is fine, but the right image does, and it's blinking.)  </p>
  
  <p>Full HTML: <a href="http://mf.atlantadesigngroup.com/firefox.php" rel="nofollow">http://mf.atlantadesigngroup.com/firefox.php</a></p>
  
  <p>Relevent HTML:</p>
  
  <pre><code>&lt;div id="portfolio"&gt;
    &lt;div class="portfolio"&gt; &lt;img src="images/portfolio/bw/uploaded1.jpg" class="portfolioImg"&gt;&lt;/div&gt;
    &lt;div class="portfolio"&gt; &lt;a href="firefox.php"&gt; &lt;img src="images/portfolio/bw/uploaded4.jpg" class="portfolioImg"&gt; &lt;/a&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Full CSS: <a href="http://mf.atlantadesigngroup.com/css/mignonFowler.css" rel="nofollow">http://mf.atlantadesigngroup.com/css/mignonFowler.css</a></p>
  
  <p>Relevent CSS:</p>
  
  <pre><code>/*portfolio page*/
  #portfolio{
      display: table;
      table-layout: fixed;
      width: 980px;
      padding: 10px;
  }
  
  .portfolio{
      display: table-cell;
      height:440px;
      border: #000000 solid 10px;
      overflow: hidden;
      position: relative;
  }
  
  .portfolioImg{
      height: 100%;
  }
  
  .portfolio div{
      height: 100px;
      width: 100%;
      position: relative;
      top: 100px;
      background-image: url('../images/captionBg.png');
      background-position: bottom;
      background-repeat: repeat-x;
  }
  
  .portfolio div p{
      display: block;
      width: 100%;
      padding-top: 70px;
      color: #c9b52e;
      text-align: center;
  }
  </code></pre>