css image in not showing in safari ?

Question

the following code is not work in safari, but properly work in IE.

<style>
.my
{
background:url("../../myproject/images/add.gif");
width:100%;
height:22px;
background-repeat: no-repeat;
}
</style>
<span class="my">

</span>

Answer 1

If IE works and Safari (and Firefox) doesn't, that probably means IE is not conforming to standard.

span, for one thing, cannot have width and height. some earlier IE version actually let you have width and height.

so you can change your span to a div to see.

also, always use a modern doctype, such as HTML 4.01 or XHTML 1.0, so that IE will try to use the more standard rendering methods.

Answer 2

By default a span element is display: inline so the height and width properties do not apply to it.

Since it has no explicit dimensions, and no content, it is rendered as being 0 by 0. This doesn't leave any room for it to have a visible background.

Use a different element (one which is block by default), or change the display property to one that height and width apply to to get this to work.

That said, if you are just creating a box with no content, there is a very good chance you should just be using an img element in the first place.

Answer 3

use backgound-image: url("../../myproject/images/add.gif"); or else use the background shortcut starting with a color:background:transparent url(...) no-repeat;

And adding display:block; would allow you to set the height and width of the span element, but it will no longer line with other text.

Answer 4

You should use background-image: url(...); see here