1

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

user632097
  • 23
  • 1
  • 5

1 Answers1

3

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.

Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • Thanks for your reponse. However this is still not working. I changed
    s to s and removed the

    , the rollover is still not responding.

     – user632097 Mar 25 '11 at 13:09
  • Give your `a` a `href` attribute. ` – Bazzz Mar 25 '11 at 13:44
  • The `href` is the critical part. I was going to post an answer explaining, but you got there just in time :P (+1) – thirtydot Mar 25 '11 at 13:46
  • haha lucky me :) I only noticed it missing when I was trying to reproduce the error with JSfiddle. I do know `a` renders similar to `span` when the `href` is omitted but when it's not there you don't always see the error at first glance. :) – Bazzz Mar 25 '11 at 13:50
  • Gah! I'm kicking myself. Thanks guys, that fixes it. Appreciate your help. – user632097 Mar 25 '11 at 13:59