IE6 Hover Bug

socoolbrewster · August 1st, 2008, 09:46 AM

Hi,

When viewing my site in IE6, IE7 and Firefox all appears well. However, when I roll over the "BUY NOW" or "ORDER" linkS in the new release or pre-order section, the containing DIV collapses when viewed in IE6. I have tried including a clearing around the containing DIVs, but it appears to make no difference.

You can view the bug here:

http://www.actinicdesignergb.co.uk/test/index.html

The CSS used for the New Release layouts is as follows:

Code:

/* Promo Pods */

.pod-wrapper { width:410px;  }

.promo-pod { width:193px; padding:10px 5px 8px 7px;
              float:left;
             }

.promo-pod img { float:left; border:solid 1px #000; margin:0 8px 8px 0; padding:0; } 

.promo-pod h2 { text-transform:uppercase; text-decoration:underline; font-size:1.1em; width:100px; }

.promo-pod p { margin:3px 0; padding:0; width:100px; }

.promo-pod p a { color:#f00; font-weight:bold; }

.promo-pod p a:hover { color:#fff; background-color:#01CC00; text-decoration:none; }
 

h2#new-releases-hr { background:url("new-releases-dance-music-hr.gif") no-repeat top left;
                       text-indent:-99999px; height:36px; font-size:1px;
                       }

and here's the HTML snipet:

Code:

 <div class="pod-wrapper fixclear"> 
        <div class="promo-pod">
          <img src="record-sleeve-temp.jpg" width="75" height="75" alt="" />
          <h2>DJ SNEAK</h2>
          <p>Magnetic</p>
          <p><a href="#">Â£4.99 - ORDER NOW</a></p>
        </div>
        <div class="promo-pod"> 
          <img src="record-sleeve-temp.jpg" width="75" height="75" alt="" />
          <h2>DJ SNEAK</h2>
          <p>Magnetic</p>
          <p><a href="#">Â£4.99 - ORDER NOW</a></p>
        </div>
        <div class="promo-pod">  
          <img src="record-sleeve-temp.jpg" width="75" height="75" alt="" />
          <h2>DJ SNEAK</h2>
          <p>Magnetic</p>
          <p><a href="#">Â£4.99 - ORDER NOW</a></p>
        </div>
        <div class="promo-pod"> 
          <img src="record-sleeve-temp.jpg" width="75" height="75" alt="" />
          <h2>DJ SNEAK</h2>
          <p>Magnetic</p>
          <p><a href="#">Â£4.99 - ORDER NOW</a></p>
        </div>
        </div>

Gaz