Planetarion Forums - HTML & CSS - inlining a block element

Planetarion Forums (https://pirate.planetarion.com/index.php)

- Programming and Discussion (https://pirate.planetarion.com/forumdisplay.php?f=57)

- - HTML & CSS - inlining a block element (https://pirate.planetarion.com/showthread.php?t=195240)

HTML & CSS - inlining a block element

They tricked me into doing HTML and CSS, and I've run into a lil' problem.
What I want to do is the following:

"Howdy, please press button (1) to continue"
where "(1)" is an image of a button 1.

This is what my logic came up with:

Code:



<style type="text/css">

.buttonholder

{

 display: inline;

}



#button1

{

 width: 50px;

 height: 50px;

 background-image: images/button1.png;

}

</style>



<html>

<body>

Press <span class="buttonholder"><div id="button1"></div></span> to continue

</body>

</html>

This gives weird results. The span is inlined properly, but the div is aligned against the left edge of the window as if it is not a child of the span.

I'm thinking of using <img> tags instead, that would inline properly, but I would lose the advantage of defining the images in the CSS file, right?

So is there a way to keep the image url in the css, AND inline properly?