IE7 rollover not working

Question

I have some code which is working fine in IE8, FF & Safari on a PC, but not in IE7. The idea is to have a large button, with a background image in the tag, and text & a foreground image. When the user rolls over the button, the background image is replaced with a different one:

CSS:

ul { list-style-type:none; }

ul li { display:inline; }

ul li.link a {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtn.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    }

ul li.link a:hover {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtnover.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    cursor:pointer;
    }

HTML:

<ul>
<li class="link">
<a id="button1" class="btn">
<div class="btntitle"><p><strong>A title</strong></p></div>
<div class="btnpic"><img src="pic.jpg" /></div>
</a>
</li>
...
</ul>

In IE7, the image is not replaced on hover, and the cursor doesn't change to a pointer. Even if I remove most of the gunk from the css a:hover, and just have a:hover { cursor:pointer; } it still doesn't work (i.e. the cursor doesn't change). I've googled this for an age & must be missing something obvious... And ideas?

Thanks, G

Answer 1

Change div to span. XHTML and HTML <5 do not allow div inside a.

Edit: Oh and while you are at it, remove the p, because p inside span is not allowed. :)

Edit 2: Add a href attribute to the a tag.