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

[Luca_pluatrco]

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 allargo/restringo la pagina, il testo rimane fisso nella sua posizione (quasi fosse fixed in orizzontale) e non segue l'header.

<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;
}

Come potrei risolvere questo problema in FF?
Grazie

[Luca_pluatrco]

Ho notato che lo stesso codice in un'altra pagina funziona!
L'unica differenza è che l'header in questo caso è racchiuso da un div con dimensione fissa e anch'esso position:relative.

<div class="wrapper">

<div class="header">
    <div  class="logo">  ...    </div>

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

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

</div>

.wrapper 
{
margin:0 auto;
position:relative;
width:980px;
}

Il resto del codice utilizza le stesse proprietà descritte nel precedente post.

Il problema potrebbe dipendere dalla width?
Tuttavia utilizzo un layout a 3 o 2 colonne con dimensioni in % o liquide (colonna centrale nel caso di 3 colonne), e da specifiche non posso utilizzare una dimensione statica.

Qualcuno saprebbe suggerirmi come risolvere questo problem in FF?
Grazie

[Luca_pluatrco]

Dopo ulteriori test ho trovato il problema diretto (non la soluzione ahime'!).
In FF se la vertical scrollbar NON è presente, il layout è corretto, con il testo che si sovrappone al cerchio dello sfondo.

Non appena la scrollbar viene visualizzata, il contenuto della pagina si muove (giustamente) leggermente a sinistra, mentre il testo rimane nella stessa posizione.
Quindi il grafico si muove a sx e mi aspettterei che anche il <div> contenente il testo facesse altrettanto, ed invece rimane nella stessa posizione.

Qualche suggerimento?
Grazie

[Luca_pluatrco]

Ho provato a racchiudere l'header in un div con position:relative, ma nessun risultato. Se invece di specificare la position per il div esterno, uso un bordo solido di 1px, il problema + risolto in FF!
Ora mi piacerebbe che qualcuno mi sapesse spiegare il motivo, dato che mi pare un'assurdità che settando il bordo (come unica rule) del div padre, venga risolto il problema, ovvero che FF pareva "non capire" che la pagina era stata ridimensionata e quindi visualizzava male lo span contenente il testo.

Puo' essere che tale regola del bordo, inneschi una sorta di funzionamento interno a FF che gli faccia ricalcolare il margine per l'header (figlio del div esterno creato ad hoc) ?

Grazie