Why is this span above the text? I want it beside the text.

Question

<td valign="center" colspan="2">
        <a href="" class="table_desc" >
        <span class="desc_info_butt"></span>
        </a>
        text here
</td>


.desc_info_butt{
background:url(Description_Button.png) top left no-repeat;
height:16px;
width:16px;
display:block;
}

For some reason, the image and text appear on two different lines!~

Answer 1

Try giving the span a float: left

at the moment, it's a block level element, forcing everything else into the next line.

By the way, I'd recommend putting a   into the span so it gets displayed in all browsers.

Answer 2

Because you've set your span to display as a block-level element. Remove the display: block and that should fix it.

Answer 3

You need to change this:

display:block;

To this:

display:inline-block;

block behaves like any block element, pushing the next one below it. You either need to make it an inline-block, float it, or take away the block styling all-together.

Answer 4

display:block transforms the span in a block (equivalent to div) so that moves the next elements on a new line