When I put a smilie (image, vertical-align: middle, 15px height) of 15px in a text with a line-height of 17px, everything is okay. But when i make the lines 16px, a smilie can change the line-height.
Its for a simple chatbox, and it is really annoying that if you type a smilie it changes the line-height.
So how can i put smilies without them changing the line-height?
There is no way, easily, to do this. You need to pull the image out of the text box (out of its calculated line height) and place it on top of it. There is a lot you have to do with scrolling and whatnot to keep everything aligned.
I would make an outer div that contains a div with that line of text. make sure the outer div is position:relative. then you can add to the outer div another div for each graphic & use position:absolute with a left:##px to line things up.
your basically ignoring the browsers standard text/image flow to get what you want. there is a good bit of work to get it done right.
EDIT:
This might work for you:
<html>
<head>
<title>Test</title>
<style>
.LineBox
{
background-color:green;
height: 17px;
margin-bottom: 3px;
}
.WordSpan
{
background-color:yellow;
height: 17px;
font-size: 17px;
margin-right: 4px;
float: left;
}
.WordSpan IMG
{
width: 25px;
height: 25px;
margin-top: -8px;
}
.EndOfLine
{
clear: both;
}
</style>
</head>
<body>
<div class="LineBox">
<div class="WordSpan">This</div>
<div class="WordSpan">is</div>
<div class="WordSpan">a</div>
<div class="WordSpan"><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></div>
<div class="WordSpan">test.</div>
<div class="EnfOfLine"></div>
</div>
<div class="LineBox">
<div class="WordSpan">This</div>
<div class="WordSpan">is</div>
<div class="WordSpan">a</div>
<div class="WordSpan"><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></div>
<div class="WordSpan">test,</div>
<div class="WordSpan">again.</div>
<div class="EnfOfLine"></div>
</div>
</body>
</html>