Menu
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> 
837
The element can contain a piece of text or an image directly. So, when it is required to wrap a run of text (or an image) to be styled or manipulated and no other element is found suitable, the span is used.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<span>: The Content Span elementThe <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang .
As all phrasing content is flow content, it means phrasing element can be used in all of flow content. The phrasing elements can only contain other phrasing elements, for example, you can't put div inside span.
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.
127
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
