Why does the cursor not show as a hand on my button in IE (Internet Explorer)

Posted by Dan Eastwell Mon, 28 Jan 2008 14:34:00 GMT

Just come across a problem that may occur again - if you're trying to create a button using background images for button tops and bottoms and a span for an icon (for example), then be careful that the 'hand' cursor appears in Internet Explorer (IE), in all latest versions (5.5, 6, 7).

If you have HTML of the form:

    <div class="button">
        <a href="#"><span>Button text</span></a>
    </div>

you might well set the span to display:block in order to have a background image show. In this case, IE will render the default cursor for span, rather than the hand ('pointer') you're expecting

in this case, set the CSS to:


    div.button span{
        cursor:hand;
    }

in your IE only css file (or add cursor:pointer;cursor:hand if you don't filter out Internet Explorer using conditional comments). The hand for the link will now show.

Posted in ,  | no comments | no trackbacks

Comments

Trackbacks

Use the following link to trackback from your own site:
http://www.thoughtballoon.co.uk/blog/trackbacks?article_id=why-does-the-cursor-not-show-as-a-hand-on-my-button-in-ie-internet-explorer&day=28&month=01&year=2008

(leave url/email »)

   Comment Markup Help Preview comment