Clear float non applicato in Firefox

[Luca_pluatrco]

Ciao,

ho utilizzato immagini di sfondo per applicare una drop shadow a dei box container di dimensioni variabili.
Lo sfondo dell'header di tali box applicato il bordo superiore e l'angolo arrotondato top-sx, mentre un'immagine (contenuta nell'header) applica l'angolo arrotodato top-dx.
Dopo l'header c'è il body del box che dovrebbe essere adiacente e applicare il lato con l'ombra.
Il problema è che in alcuni casi (ma non sempre!) l'header rimane piu' alto dell'immagine di sx con il risultato che il contorno ombreggiato subisce un'interruzione.
Dopo vari tentativi ho risolto questo in IE applicando all'header min-heigth:0 che va ad eseguire il clearing del float. Applicando regole analoghe (con :after) per firefox, tuttavia, il problema non si risolve. In allegato un'immagine del problema (solo Firefox).

QUi il codice HTML:

<div class="WPContainer">
	<div class="WPHeaderContainer">
		<div class="WPIconContainer">
			[img]logoBox.gif[/img]
		</div>
                <div class="WPTitleContainer">
			Here the title
		</div>
                <div class="WPAdminMenuContainer">
                </div>
                <div class="WPActionMenuContainer">
			<div class="menu WPActionMenu">
			      <ul>	[/list]
			</div>
		</div>
	</div>
        <div class="WPBodyContainer">
	/* body content*/	
       </div>

       /*.....*/

Qui il codice CSS:

.WPContainer
{
	width:100%;   		  
	 background: white url(images/Backgrounds/sbbody-r.gif) no-repeat bottom right;
	margin:0px;
	padding:0;
}

.WPHeaderContainer
{			
	background: url(images/Backgrounds/sbhead-r.gif) no-repeat top right !important;
	min-height:0;	/*IE7 float clear. Solves the problem in IE*/
}

/*   To clear float elements -> NON APPLICATO IN FIREFOX */
.WPHeaderContainer:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
	min-height:0;
}

.WPIconContainer
{	
	float:left;	
	margin: 0;   /*Must be 0 to keep the round corner image*/
	padding:0;
	background: url(images/Backgrounds/sbhead-l.gif) no-repeat top left;	
	min-height:50px;    /*To hide the gap even in Edit Mode*/
}

	
.WPIconContainer-img  {	padding: 8px 0 0 8px;   }

.WPTitleContainer
{
	float:left;    
	margin:10px 0 0 10px;       
	padding:0;
	font-weight:bold;
	font-size:16px;
	letter-spacing: -0.2px;
	min-height: 0;         /* IE7 float clear*/
}

.WPMenuContainer
{
	float:right;
	margin-top:2px;
	text-align:right;
}

.WPBodyContainer
{	
	width:92%;  /*Not 100% to consider margin and padding*/	
	margin:0;
	padding:0 10px 5px 10px;	
	background: url(images/Backgrounds/sbcent-l.gif) no-repeat bottom left;
}

.WPActionMenu
{	
	clear:both;	
	float:right;
	display:inline;
	width:auto;
	margin:0;
	padding:0;	
}

Come potrei risolvere il problema anche in Firefox?
Grazie in anticipo

[fcaldera]

non è chiaro su quale elemento si verifica il problema (l'immagine non aiuta)
a naso, dalla tua descrizione, credo che il problema sia dato dal fatto che explorer setta l'altezza minima degli elementi in base al font-size.

Quindi impostando font-size a 0 negli elementi che devono essere alti pochi pixel dovresti risolvere il problema. Ripristina il font-size negli elementi in cui dovrà apparire un testo

[Luca_pluatrco]

Ciao,

il problema risiede nel div "WPActionMenuContainer" (contiene WPActionMenu). In IE e' "flottato" a destra correttamente, mentre in Firefox si espande fino a sotto il div header che lo contiene.
Questo fa si' che si crei il "gap" dello sfondo. La difficoltà è che i div come WPActionMenu sono riempiti a runtime in modo dinamico (rappresentano funzionalità di amministrazione).

Per questo non posso settare a priori la font size a meno che non la vada a reimpostare via script quando necessario, ma preferirei evitare se possibile.

.WPActionMenu
{	
	clear:both;	
	float:right;		
	display:inline;
	width:auto;
	margin:0;
	padding:0;	
}

.WPActionMenuContainer{min-height:0;}

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

Spero sia un po' piu' chiaro.
Grazie