Background image not showing up in span tag

Question

Im having trouble with a span tag showing a background image in the latest FF on windows 7. It seems to work and show everything fine in earlier FF, Chrome, Safari and IE but handheld devices and windows 7 it seems to fail.

Sorry if this seems vague I just cant figure it out, the images were originally pngs with no height specified and ive since made them gifs and applied a height.

<span class="design">Design Viz</span> <style> .design  {     background:url(_includes/images/agenda-design.gif) no-repeat top left;     display: inline-block;     height: 17px;     padding-left:25px; } </style> 

Answer 1

The background-image CSS property only puts an image as the background. The width and height of an object is always defined either by static settings via CSS/inline styling, or by the actual size of the content displayed in it. In your case, since you haven't added any content between your tags, its x/y dimensions will be 0, but there is no bug with the background. It's there, only you can't see it unless you define (somehow) a size for the element.

<span class="design">Design Viz</span> .design  { padding-left:25px; background:url(_includes/images/agenda-design.gif) no-repeat top left; display: inline-block; height: 17px; width: 50px; } 

Where 50 can be any helpful value suited for your case.

Answer 2

display:inline-block; is not supported by IE7. You can fix it by adding:

.design  {     padding-left:25px;     background:url(_includes/images/agenda-design.gif) no-repeat top left;     display: inline-block;     height: 17px;     width: 50px;     zoom: 1;     *display:inline; }