I have a div and I am adding an image in-line, the problem is when the image is bigger than the line-height it just increases the line-height instead of having the image go over the text.
Here is my code:
<html>
<body>
<div style="height:130px; width:130px;">
one two three four five
<img src="http://ladyenews.files.wordpress.com/2011/03/smiley-emoticon.png" style="width: 20px; height: 20px; display:in-line;">
six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen
</div>
</body>
</html>
Example here: http://jsfiddle.net/dWkfq/1/
So how do I get my image to get inserted into my div without the line-height increasing, I need the image to overlap onto the text if it is too big?
I was thinking maybe somehow putting the image in another div with a max-height and then setting the overflow to visible or something but I'm afraid the answer will be much harder and involve absolute positioning with javascript.
I would just absolutely position the image on my own but the text is subject to change so I need a flexible solution.
Replace
display:in-line;
with
position:absolute;
OR
vertical-align:text-top;