Display an image in span without converting it to a block level element

Question

I am a little confused over here. I have a txtbox and to the right of the txtbox, i want to insert a help icon. i have inserted that into a span. the problem is that i dont want to make this span a block because it goes down then. is there any other way to display this image without turning this into a block level element?

The Code goes here:

<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span>

The CSS:

#helpico{ background:url(images/question.png) left top; width:16px; height:16px;}

and i donot want to float it either. Sorry for this. – themajiks Feb 22 '11 at 11:39 — themajiks, Feb 22 '11 at 11:39
Why not? That's the best way to do it! – adarshr Feb 22 '11 at 11:41 — adarshr, Feb 22 '11 at 11:41
Do one thing. Set `display: inline` for your input tag. – adarshr Feb 22 '11 at 11:41 — adarshr, Feb 22 '11 at 11:41

Kyle · Answer 1 · 2020-02-04T13:56:41.957

You can use this CSS:

#firm 
{
   float: left;
}
#helpico
{ 
   background:url(images/question.png) left top; 
   width:16px; 
   height:16px;
   display: block;
   float: left;
}

You have to use display block to enable widths and heights and to accept other styles. But to counter your issue of it "going down" you can set both the elements to float left and they will remain inline within the parent element.

Be aware that if the icon is relative to the content, it should be included with <img> tag and an alt attribute.

After seeing that you don't want to use floats OR display block, there is only one way left, use display: inline-block;.

Example for you here. :)

Broken link, Please fix this – Trikaldarshiii Jan 08 '20 at 08:19 — Trikaldarshiii, Jan 08 '20 at 08:19

score 1 · Answer 2 · answered Feb 22 '11 at 11:35

Wrap both the elements in a div, make the span a block and give a CSS style of float: left to both the input and span tags.

<div id="wrap">
    <input name="firm" type="text" id="firm" size="20" />
    <span id="helpico"></span>
</div>

And the CSS

#helpico { 
    background:url(images/question.png) left top; 
    width:16px; 
    height:16px;
    display: block;
    float: left;
}

#firm {
    float: left;
}

score 1 · Answer 3 · answered Feb 22 '11 at 11:42

Can't you use an img tag for the image? That will display inline.

Generally the img will not display your icon at a pretty height (it will be too far up). Use either vertical-align for that (often text-bottom will work out) or use position:relative and top:3px or so on the img.

<input name="firm" type="text" id="firm" size="20" /><img id="helpico" src="images/question.png">

css

#helpico { vertical-align:text-bottom; }

Display an image in span without converting it to a block level element

3 Answers3