Background image not showing up in span tag

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>

Answers


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.


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;
}

You cannot set attributes no-repeat top left if you declare background-image. In background-image you must only set the link to your image.

Or you could use background like this:

background: url(...) no-repeat top left

use padding like

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;

Add width: 17px to your css style too (or whatever width it is)


Need Your Help

How do you customize/style codeigniter errors?

php codeigniter xhtml

I'm trying to customize the CSS/HTML for error message displays in codeigniter so I can apply a tag too each and style them up.

UML Plugin for Netbeans 7.0?

plugins uml netbeans-plugins netbeans7.0

how can i install/add UML plugin to Netbeans 7.0, i can find several ways to install plugin but only for the earlier versions from 6.9