Q: Make div with background image on line with span in paragraph Im currently trying to implement a debug console in my application. For this i have a main div with the following CSS:
#~main_div~ {
    display: none; /* gets set to display: block when the users wants the console */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 25%;
    max-height: 350px;
    background-color: rgba(153, 153, 153, 0.8);
    text-align: left;
    overflow-y: auto;
} 

The id ~main_div~ is replaced by the element thats actually holding the debug console for a loaded frame (all of this correctly shows)
Then i add messages to that div which in general are of the following format:
<p>
    <span class="title_notice">[timestamp] Title: </span>
    <span class="message_notice">The message</span>
</p>

Yet sometimes i want to display images inlined in the text (like The [an image] message). I have done this the following way (example):
<p>
     <span class="title_notice">[timestamp] Title: </span>
     <span class="message_notice">The 
         <div style="display: inline-block; width: 25px; height: 25px; background-image:url(...);"></div>
         message
     </span>
</p>

If you wonder why im using a div and not an img: Its possible to give an offset inside the image and a size so that it displays only a portion of the image, and afaik you cant do that with img.
The result sadly looks like this:
http://puu.sh/6gwdH.jpg (sorry, i cannot attach the image because of rep...)
Problem 1: The div is on a new linew
Problem 2: The format on the span (which is actually set by #~main_div~ p (font family, font size and font weight) and .message_notice (color)) is lost
Is there a way to 'inline' an image in a text so that its on the same line and the format does not break and im able to select only a portion of the image? Oh, and the solution only has to work for webkit, no portability is required.
Many thanks in advance and greetings
Cromon
