Can anyone help? This becomes a nightmare for me. CSS and Firefox

[ryh]

Hello,

I have the following HTML:
<style>
..eHead{
border: 1px solid;
text-align: left;
display: block;
height: 100px;
vertical-align: bottom;
}
..eHead .hOff {
margin:2px;
padding:3px;
border:solid #aaa 1px;
background:#f5f5f5;
}
IMG {margin:0px}
</style>

<div class="eHead">
<span class="hOff"><img src="http://www.onet.pl" width="10"
height="10"/></span>
<span class="hOff"><img src="http://www.onet.pl" width="10"
height="10"/></span>
</div>

If you run it in IE you see that 2 images (together with borders) are
on the top left side of DIV. This is quite ok but as you may see I
wanted it to be ont the bottom left corner (vertical-align: bottom;).

But when you run it in FireFox it is mess - SPAN borders overwrite DIV.

Is there any way to fix this to work the same as in IE. I have used
-moz-box-sizing: border-box; and other tricks but it seems not to work
in FireFox.