Trying to align a span with an image background next to a list of images, but the span is appearing 40px below the images instead of right next to them.
My HTML code:
<div id="people">
<img width="44" height="44" src="http://www.mysite.com/image.png" class="personImage" rel="/Person/CorpInfo/74" title="Name">
<img width="44" height="44" src="http://www.mysite.com/image2.png" class="personImage" rel="/Person/CorpInfo/79" title="Name">
<span class="initials" rel="/Person/CorpInfo/839" title="Name">YA</span>
<img width="44" height="44" src="http://www.mysite.com/image3.png" class="personImage" rel="/Person/CorpInfo/49" title="Name">
</div>
It seems that when displaying a list of images and occasionally a span with initials and a generic picture as background, the span is not lining up properly.
CSS for the "initials" span:
.initials
{
display: inline-block;
font-size: 24px;
vertical-align: middle;
height: 44px;
left: 0;
top: 0;
line-height: 44px;
font-weight: 500;
overflow: hidden;
background: url('/content/Images/generic1small.png') no-repeat 0 0;
text-align: center;
width: 44px;
}
and CSS for the "personImage" class:
.personImage
{
display:inline;
}
Tried using a hack to align them:
<style type="text/css">
.initials { margin: -40px 5px 0px 0px;}
</style>
However, this hack causes other issues on the page. Any suggestion on why the span is not aligning properly with the images?