[Theme: Twenty Eleven] IE8 hover works in custom widgt but not in sidebar widgts

Hey,

Driving myself batty.

Converting a joomla site to a wordpress site. The client uses Internet Explorer 8. They cannot upgrade due to policy so that is not an option.

I am using a child theme of twenty eleven.

1 – I have rollover elements that have to work in both my custom widgets and the sidebar default widgets.

2 – The rollover code I am using works in BOTH the custom widget and the sidebar widgets in Firefox (Mac), Chrome (Mac), & Safari (Mac)

3 – The rollover code ALSO works in IE8 IN THE CUSTOM widget ONLY.

4 – So, basically, the rollovers ONLY do not work in the sidebar widget in IE8.

The side bar code is this:

<div class="img_block">
    <img src="https://www.theedgebank.com/eGbankSite/wp-content/uploads/2014/01/buttonVisaCheckcard.png" alt="VISA check card" height="168" width="284" />
    <div class="hover_block" height="168" width="284" >
    <a href="https://www.theedgebank.com/eGbankSite/visa-check-card/"><img src="https://www.theedgebank.com/eGbankSite/wp-content/uploads/2014/01/buttonVisaCheckcardON.png" alt="VISA check card"  height="168" width="284" /></a>
    </div>
</div>

And the style is this:

.img_block {position:relative; margin:0;padding:0;}
.hover_block {display:none; position:absolute; left:0; top:0;}
.hover_block img{width:100%; height:100%;}/* If require */
.img_block:hover .hover_block{display:block;}

5 – When I place code from the Custom Widget in the Sidebar Widget – it no longer works in IE8.

I don’t understand why basically the same code works in one place and not another. And only broken in IE8. In the other browsers the code works wherever I put it.

Any help would be appreciated.

Thanks!