Advance Problem about boxing model with link and rollover

hi all…
Thanks in advance for any solutions

so… here are [B]the facts[/B]:
1.im displaying only the half image…in hover shows the other half
2.this is a box model div for dynamic products
3.the hover function works fine
4.the link on the image works fine in Firefox
5.the image in my example is 75×100

[B]The problem: [/B]
The hyperlink works everywhere in the main div…exept over the image (only the hyperlink, not the hover)
and i dont know why???? grrr
i remind you that the problem is only in IE not in FF

[B]html: [/B]

[CODE]<div class=”boxnav”><a href=”#”>
<div id=icon_container>
<div id=icon><img src=”image.jpg” border=”0″></div></div>
<div>title</div></a></div> [/CODE]

[B]css: [/B]

[CODE]div.boxnav {
z-index:1;
margin: 0pt;
font: 11px Tahoma, Arial, sans-serif;
white-space: nowrap;
height: 140px;
width: 18em;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position:relative;
}

div.boxnav div { margin-left: 15px;}

div.boxnav a {
text-decoration: none;
color: #999;
font-weight: bold;
display: block;
width: 100%;
height: 100%;
position:absolute;
}
div.boxnav a:hover {
background-color: #f4f4f4;
color: #000066;
}
div.boxnav #icon_container {

margin-top: 50px;
overflow: hidden;
width: 75px;
height: 50px;
}
div.boxnav div#icon { margin:0px;margin-top: -50px;}
div.boxnav a:hover #icon {margin:0px;} [/CODE]

Thanks again

ps. ithink that the #icon_container was something bug-able ?

Also in #CSS _↴