IE, DIV, images, float and LightView

Question

I'm trying to figure out why images seem to jumble around in IE versus Chrome.

Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.

I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.

CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.

Cheers, Trin

#persongalleri
{
 margin-left:5px;
 overflow:hidden;
}
img.person /* til personalesiden */
{
    width:80px;
    height:auto;
    border:1px solid #000;
}
div.personwrap
{
    float:left;
    position:relative;
    margin:2px;
}
div.undertekstkasse
{
    position:absolute;
    bottom:1px;
    left:0px;  
    width:100%;  
    background-color:black;  
    font-family: 'Verdana, Arial, Helvetica';  
    font-size:14px;
    font-weight:bold;
    color:white;  
    opacity:0.6; 
    filter:alpha(opacity=60);
}
p.undertekst
{
    padding:6px;  
    margin:0px; 
    text-align:center;      
}

Answer 1

Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.

div.personwrap {
    height: 105px;
    margin: 2px;
    position: relative;
    float:left;
}

You could also remove the float, and just add display: inline-block