html - pictures as letters wrapping incorrectly

Question

I need to use pictures of letters (so instead of "hi", there is an image of the letter h then an image of the letter i) in an html document, but Firefox wraps the words incorrectly (other browsers are irrelevant). Normally, Firefox will start a new line at the beginning of a word, but when I replace the letters with pictures of letters, it will cause a line break in the middle of a "word". How can I get Firefox to recognize that the pictures of letters should be treated like letters? I'm using HTML 4 I think.

Answer 1

Don't have much to go on here like pic sizing, etc, but I think you should start with something along these lines:

<div id="container">
  <img class="lettpics" src="path/to/image.png" />
  <img class="letterpics" src="path/to/image2.png" />
</div>

and then a css like this:

.letterpics {
  display:inline;
  float:left;
}

here's a quick and easy link to the jsfiddle I made: http://jsfiddle.net/ura5be5m/

hopefully this helps.