Span cursor style on empty areas. IE8 problem

Question

Hi

I have a span with the following style:

margin: 5px 0;
padding: 2px;
cursor: pointer;
display: block;
width:100%;
background-color:Blue;

This works fine with IE6, IE7, FF3 and Chrome, but in IE8 the cursor is changed only in the parts of the span that have text (in other browsers the whole span has the cursor changed).

Any idea of how to fix this problem (I don't want to put the compatibility tag on the page).

Cheers!

Solution: The problem was that the spans were inside a floated div, that was causing the problem.

Answer 1

It is working fine for me in IE8

Here is a sample:

http://jsbin.com/oqiwo

(add /edit to edit the code)

<span style="margin: 5px 0;padding: 2px;cursor: pointer;display: block;width:100%;background-color:Blue;" >Hover over to change cursor to pointer</span>

Answer 2

Add position: relative to your current style. The cursor will appear correctly.