255041 - CSs template background-image is not recognized as clickable image when linked

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[Wayne Walton]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1

http://www.harrynorman.com/HNRDesktop.aspx?TabId=103  

The "Search"  button is produced by these two pieces of code:

<input type="submit" name="_ctl2:ucSearchEntry:imgSearchButton1" value=""
onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
language="javascript" id="_ctl2_ucSearchEntry_imgSearchButton1"
class="buttonSearch" onMouseOver="this.style.cursor='hand'" />

and here is the CSS:

.buttonSearch {
background-image: url(/images/search/search.gif);
border: 0px solid #ffffff;
color: yellow;
padding: 0px;
font-size:10px;
width: 117px;
height: 29px;
}

even though you can successfully click the button and search in Firefox, the
mouse does not change to a hand to indicate that you are hovering over a link. 
This does work in IE.

Reproducible: Always
Steps to Reproduce:
1. http://www.harrynorman.com/HNRDesktop.aspx?TabId=103
2. Hover over "Search" button
3. No change in mouse pointer

Actual Results:  
Exactly what was explained in the details, no change in the mouse pointer

Expected Results:  
changed the mouse pointer to indicate a clickable link.

Comment 1

[Peter van der Woude [:Peter6]]

remove the cursorpart and add to the class

.buttonSearch {
background-image: url(/images/search/search.gif);
border: 0px solid #ffffff;
color: yellow;
padding: 0px;
font-size:10px;
width: 117px;
height: 29px;
cursor:hand; cursor:pointer; 
}

cursor:hand = IE only, all other browsers use cursor:pointer.
Use both and you'll be all browser compatible

->WORKSFORME