Div con position:absolute non è contenuto dal div padre con position:relative in FF

francesco.it

Div con position:absolute non è contenuto dal div padre con position:relative in FF

Salve,

Devo centrare uno span in un punto preciso dell'Header: in particolare devo centrare del testo (dello span) in una "O" che è parte dello sfondo dell'Header.

Ho quindi definito l'header con position:relative e vado a posizionare in modo assoluto il testo.
Questo funziona bene in IE e Safari,mentre in FF, quando carico la pagina, visualizza correttamente, ma se poi allargo/restringo la pagina, il testo rimane fisso nella sua posizione (quasi fosse fixed) e non segue l'header rimanendo con il margine stabilito.

[html]<div class="header">
<div class="logo"> ... </div>

<div class="HeaderLinksWrapper">  ...  </div>

<div class="wsNameHintContainer">
   <span>ventures</span>
</div>

</div>

.header
{
position:relative;
min-width:980px;
display:block;
height:116px;
background:Transparent url(images/Backgrounds/headerBgr.png) top right no-repeat;
}

.logo
{
margin:0;
padding:15px 0 0 15px;
float:left;
min-width:150px;
}

.HeaderLinksWrapper
{
float:right;
margin-right:175px;
position:relative;
}

.header:after, .logo:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}

.wsNameHintContainer
{
position:absolute;
top:30px;
right:69px;
width:76px;
height:70px;
line-height:1.1em;
text-align:center;
}

.wsNameHintContainer span
{
display:table-cell;
vertical-align:middle;
width:75px;
height:70px;
}[/html]

Come potrei risolvere questo problema in FF?
Grazie

karedas

Ciao Francesco e benvenuto nel forum gt

Hai provato a rimuovere all'header il "min-width"?

francesco.it

@karedas said:

Hai provato a rimuovere all'header il "min-width"?
Ciao,

si ho provato, anche settando una larghezza specifica, ma nessun miglioramento. Dopo ulteriori test nel dettaglio, ho visto che il problema risiede nel fatto che FF in qualche modo non riconosce che l'header si è ridimensionato, ma continua a tenere il margine destro dello span fisso. Stesso problema quando ho lo scroll bar verticale, che sposta a sinistra l'header, ma non il testo dello span.

Se con Firebug (plugin di FF per visualizzare DOM e CSS) commento/ripristino la proprietà position:relative; dell'header, allora lo span viene riposizionato bene. Questo conferma che in qualche modo vi è un problema nel calcolare il margine delo span.

Qualche idea?
Grazie