CSS background image inconsistency in IE6 and IE7

Question

I have a span that is generated through javascript, with its css class as follows:

.class1{  
  width:25px;
  height:25px;
  background-image: url(pic.png);
  background-repeat:no-repeat;
  background-position: center; 
  cursor:pointer;
  margin-left:10px;
 }  

The problem is on, the html page, i can see the pointer -cursor, but not the background image,over the span, in IE7.

In IE6, both get shown , no problems.

Answer 1

Span, by definition, is an inline element, try adding display:block; or display:inline-block; to .class1. Also add height and width of your image.

Like so:

.class1{  
  width:25px;
  height:25px;
  background-image: url(pic.png);
  background-repeat:no-repeat;
  background-position: center; 
  cursor:pointer;
  margin-left:10px;

display:block; /*or inline-block*/
height:100px;
width:100px; /*img height and width*/
 }