a href round div not working in ie7 and ie6

[colinod]

i have the following div on a page the link works fine in ie8 and above but in 7 and 6 i do not get the hover finger and the link does not work

any ideas

<a href="news2.asp?id=386&voicetype=All" name="386">
<div class="newsitem">
         <div class="newstxtright"><img src="http://bytes.com/submit/images/newstext/rupert degas.png" border="0"></div>
        <div class="artistboysnewsleft"><img src="http://bytes.com/submit/images/pix/rupertdegas.png" name="boysnewsimg" border="0" class="boysnewsimg">
        <div class="boysnews">Rupert<br>Degas</div></div>
</div></a>

this is the css for the divs on the page

/* start news */
#newslist {
    margin: 0 auto;
    width: 840px;
    top: 180px;
    /* [disabled]background-color: #FFF; */
    padding: 5px;
}
.newsitem {
    width: 800px;
    border:#ef007b;
    border-style:solid;
    border-width:thin;
    height:155px;
    margin-top: 15px;
}
.artistboysnewsright  {
    /*border: 1px solid #f39617;*/
    width: 85px;
    height: 130px;
    float: right;
    margin-top: 7px;
    margin-right: 7px;
    margin-bottom: 7px;
    margin-left: 7px;
    padding-top: 10px;
    text-align: center;
 
}
.artistboysnewsleft  {
    /*border: 1px solid #f39617;*/
    width: 85px;
    height: 130px;
    float: left;
    margin-top: 7px;
    margin-right: 7px;
    margin-bottom: 7px;
    margin-left: 7px;
    padding-top: 10px;
    text-align: center;
 
}
.newstxtleft {
    float: left;
    margin-top: 17px;
    padding-left: 10px;
}
.newstxtright {
    float: right;
    margin-top: 17px;
    padding-right: 10px;
}
.boysnews {
    background-image: url(../images/newfrontpage/b.gif);
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    font-weight:bold;
    color: #000000;
    text-decoration:none;
}
.girlsnews {
    background-image: url(../images/newfrontpage/f.gif);
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    font-weight:bold;
    color: #000000;
    text-decoration:none;
}
.kidsnews {
    background-image: url(../images/newfrontpage/k.gif);
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    font-weight:bold;
    color: #000000;
    text-decoration:none;
}
.boysnewsimg {
    top: -9px;
    width: 82px;
    height: 82px;
}
.girlsnewsimg {
    top: -9px;
    width: 82px;
    height: 82px;
}
.kidsnewsimg {
    top: -9px;
    width: 82px;
    height: 82px;
}
/* end news */

this is the page in question
http://www.yaketyyak.co.uk/newpages/news.asp

thanks

[Frinavale]

You cannot put a <div> within an <a>.
Use a <span> instead and set the span's style to "display:block" so that it behaves like a <div>.

-Frinny

[colinod]

ok i have changed it slightly and put the <a> within the outer <div>

<div class="newsitem">
<a href="news2.asp?id=386&voicetype=All" name="386">
         <span class="newstxtright"><img src="../images/newstext/rupert degas.png" border="0"></span>
        <span class="artistboysnewsleft"><img src="../images/pix/rupertdegas.png" name="boysnewsimg" border="0" class="boysnewsimg">
        <span class="boysnews">Rupert<br>Degas</span></span>
        </a>
</div>

still does not work though??