image in div doesn't display anything

Question

i'm trying to insert an image in a div container using css and html, but it doesn't display any image.

html code:

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"></span>
</div>
</div>

css:

#quoteContainer {
    color: #898989;
    background:#F9F9F9;
    border: solid 1px #ddd; 
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    margin:65px auto;
    padding:15px;
    width:500px;

}

    .start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
    }

apart from the img, not even the border shows. i tried using the <img> tag in html to insert the image inside the div, that doesn't work either. is there anything wrong with the code?

Answer 1

That's because a span is an inline element by nature, and won't accept arbitrary width nor height values. You'll have to either make it a block/inline-block element (Wasn't there a question about that yesterday?) or fill it with content.

It would most certainly work with an img element if you set the src property.

And, as already said yesterday, if you want your empty elements to display properly throughout browsers, make sure you fill them with at least an  

Answer 2

The span element, being an inline element, cannot take a width and a height.

Did you try the following?

<div id="wrapper">
<div id="quoteContainer">
 <img src="image/img1.png" />
</div>
</div>

Answer 3

You need to change the span from being inline:

.start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
     display:inline-block;
    }

And put something in the span.

<span class="start_img">&nbsp;</span>

Answer 4

if you have in a big content & and they floated give that divs & span float/

When an element cant take width, you have to try add;

display:block; 

to your class/

and for your divs;

display:block;
width:204px;
height:24px;

but as Pekka said;

<img src="#" class="blabla" alt="img" />

works fine//

Answer 5

Maybe you don't have the image uploaded properly? Double check that and all of your syntax because these all seem like reasonable and sensible explanations. You could just do:

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"><img src="http://www.whereYouStoreimage.com/link/to/image/imag.png"/&gt;&lt;/span&gt;
</div>
</div>