background in inline div get cut from the bottom in Chrome! fine in IE

Question

i have this code:

<span>your password</span><div style="display:inline; width:160px;height:22px;background-image:url('pics/BGfield.gif');"><input name="password" type="password"></div>

the back ground get height of maybe 18-20 px... why is that?

if i use span it does the same - if i use div as block it is ok

as said - problam in Chrome, FF but not in IE

Answer 1

If I remember correctly, you are not allowed to set the height of an inline element. That's why, when you set the display:block it works as expected. Also, you cannot set the height of a span element.

The fact that it works in IE only means that IE is not following the standards, as usual.

UPDATE: What I usually do, instead of using an inline element, is using a floated one. For example:

<div style="float:left">your password</div>
<div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');">
  <input name="password" type="password">
</div>
<div style="clear:left;"></div>

UPDATE 2: Maybe something like this will work

<div id="container" width="THEWIDTH">
  <div style="float:left">your password</div>
    <div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');">
      <input name="password" type="password">
    </div>
  <div style="clear:left;"></div>
</div>

Where THEWIDTH is the width of the divs inside "container" plus some margins/paddings you want to give them.

The spacing between the divs, you will have to set it in each divs' style, though.