1

I am having trouble with ie7 getting a div to be linked correctly. I have tried styling the anchor link to display:block, as well as setting height and width of the anchor but nothing seems to work.

ie7 shows the links on hover but when I click it does not work.

I know this is a common problem so I tried rearranging the anchor and divs but nothing seems to work..

html:

<div class="cat_prod_box" data-id="id-581">
  <a href="http://localhost/test.html" class="block_link" >
    <span style="display:none" class="price">145</span>
    <span style="display:none" class="viewed">142</span>
    <span style="display:none" class="featured">0</span>

    <div class="span_product_name">product</div>
    <div class="span_price">CAD $145.00</div>
    <div class="span_style_num"> style: 198USD</div>
        <div class="image">
            <div class="cat_image_table" style="outline:none;">
                <img src="images/198USD.jpg" alt="alt txt" title="tit txt" width="240" height="332" />
                </div>
            </div>  
            <div class="cat_product_info">
                <div class="icon_div">
                  <div class="icon-wrapper">
                        <ul class="site-icons">
                              <li>
                                <dl>
                                  <dt class="icon_fireproof"></dt>
                                  <dd class="icon_name">fireproof</dd>
                                </dl>
                              </li>                                               
                        </ul>
                  </div>
            </div>
        </div>
    </a>
</div>

css:

.cat_prod_box {width:240px;text-align:left;float:left;margin:0px 0px 10px 2px;position:relative; border: solid 3px transparent;}
.cat_prod_box a img, .cat_prod_box a     { border: none; float: left; }
.cat_prod_box a   { margin: 1px; }
.cat_prod_box a:hover  { outline: 1px solid #ccc; }
a.block_link {display:block;  cursor: pointer; } 

.image {   position: relative;   width: 100%; /* for IE 6 */ }
.cat_image_table { width:235px; margin:0; padding:0; border-spacing:0; border:none; height:340px;}

.cat_product_info {width:240px; height:105px; font-family:arial; font-size:12px;  overflow:hidden; }

.icon_div {
float: left;
width: 255px;
position: absolute;
bottom:0;

}
.icon-wrapper {position: relative; text-align: center;}
.site-icons { text-align: center; }
.icon_div .icon-wrapper .nikeid-icons li { margin-bottom: 10px; width: 52px; display: inline-block; margin-top:10px; }
.icon_div .icon-wrapper .site-icons li dl dt { height: 25px; }
.icon_div .icon-wrapper .site-icons li dl dt img { vertical-align: middle; max-height: 25px; }

http://jsfiddle.net/zt7Y3/2/

above is the fiddle even though jsfiddle does not load in ie7 apparently.

Sackling
  • 1,780
  • 5
  • 37
  • 71
  • found my answer here: http://stackoverflow.com/questions/796087/make-a-div-into-a-link/3494108#3494108 – Sackling Dec 11 '13 at 05:42

1 Answers1

1

It looks like bug in Opera and IE.

Remove image from html and add your image on background of this class .cat_image_table. It will be working on IE7

.cat_image_table { 
width:235px; margin:0;
padding:0; 
border-spacing:0; 
border:1px solid #000;
height:340px; 
background:url(images/198USD.jpg) no-repeat;
}
Khizer Najeeb
  • 507
  • 5
  • 15