Problème css sous mozilla

#profil div		{ margin:0 auto 0 auto; padding:10px 0 0 0; width:106px; }
	#profil p 		{ margin:0 3px 0 3px; padding:0; width:100px; }
	#profil p strong{ display:block; height:14px; position:relative; width:100%;  padding-top:2px; margin:2px 0px 0px 0px; padding-bottom:4px; }
	#profil p var	{ position:absolute; z-index:100; color:#FFF; font-style:normal; text-align:center; width:100%; }
	#profil p .bg	{ display:block; height:14px; position:absolute; top:0; left:0; width:100%; z-index:2; background:#bababa repeat-x; border:1px solid #9D9D9D;  }
	#profil p .Pr100{ display:block; height:14px; position:absolute; top:0; left:0;  z-index:3; background:#dd3d5b repeat-x; border:1px solid #741B55;  }
</style>
.
.
.
.
<tr>
	<td height="35" align="center">
		<div id="profil">
			<p>
				<span class="txt">Profil complet à :</span>
				<strong>
					<var>50%</var>
					<span class="Pr100" style="width:50%;"></span>
					<span class="bg"></span>
				</strong>
			</p>
		   </div>
	</td>
</tr>

<var>50%</var>

#profil p var{ position:relative; z-index:100; color:#FFF; font-style:normal; text-align:center; width:100%; }