problem in overlay div- chrome/IE

i have a problem in chrome in this webs开发者_如何学运维ite http://emprego.herobo.com/site/login/emprego.php

if you open it in firefox, all works well and the position of the overlay div in the images is perfect, but in chrome and IE the result is different.

Part of the div that must be hidden, is showed (where have the name Luciana Valença).

what is the possible reason?

thanks

example in FF4

---

Perhaps trying adding some line-height to the text items. After a quick test it fixed the header then with a bit more tweaking you should be able to get the 'description' behaving correctly.

Also you may want to give your text more structure which will help with the styling control. Below is a rouigh untested example.

HTML:

<div class="capty-caption">
    <div id="content-target1">
        <h3>Luciana Valença</h3>
        <p>Designer, Artista Visual e Ilustradora . Tem 35 anos e mora no R.Janeiro.</p>
    </div>
</div>

CSS:

.capty-caption {
   height: "managed by js?"
}

.capty-caption h3 { 
   font: bold 15px verdana;  
   line-height: 20px;    
   margin: 0px; 
}

.capty-caption p {  
   line-height: 14px;    
   margin: 0px; 
}

---

Try using padding-top: 30px; instead of margin-top: 30px;

This is for the #contactos element