[Résolu] Règles CSS qui ne s'appliquent pas

bonjour

je souhaite réaliser une customisation de reCaptcha pour mon site photo réalisé avec le CMS ZenPhoto.

je rencontre des difficultés sur certaines règles CSS qui ne sont pas prises en compte correctement sur des "vieux" navigateurs (IE8 / FF 3.6)

dans ce cas, se sont les règle du thème qui s'appliquent et pas les règles spécifiques que je veux utiliser.

voici la page HTML qui contient la customisation de reCaptcha suivant les principes vu ici https://developers.google.com/recaptcha/docs/customization?hl=fr

<style type="text/css">
	div#recaptcha_widget_content {
		padding: 5px;
		border: 1px solid #6edaff;
		background: #d4f4ff;
		width: 300px;
		height: 115px;
		overflow: hidden;
		border-radius: 5px; -moz-border-radius : 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
	}
	div#recaptcha_image {
		border: 1px solid #6EDAFF;
	}
	div#recaptcha_input {
		float: left;
		margin: 15px 0 0;
		padding: 0;
		width: 190px;
	}
	div#recaptcha_input span {
		color: #4B4B4B;
		text-align: left !important;
		color: #4b4b4b;
		font-family: Arial, Helvetica, Helvetica, sans-serif;
		font-size: 90%;
	}
	input#recaptcha_response_field {
		width: 150px !important;
		background: #fff !important;
		border: 1px solid #6edaff !important;
		padding: 3px 5px !important;
		margin: 0 5px 0 0 !important;
		color: #4b4b4b !important;
		font-family: Arial, Helvetica, Helvetica, sans-serif;
		font-size: 90% !important;
		font-weight: normal !important;
		border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px;
	}
	input#recaptcha_response_field:hover, input#recaptcha_response_field:focus {
		border: 1px solid #6edaff !important;
	}
	div#recaptcha_controls {
		float: left;
		margin: 8px 0 0;
		padding: 0;
		width: 109px;
		height: 50px;
	}
	ul#recaptcha_ul {
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	ul#recaptcha_ul li {
		margin: 0;
		padding: 0;
	}
	li.recaptcha_button_refresh {
		height: 18px !important;
	}
	li.recaptcha_button_text {
		height: 15px !important;
	}
	li.recaptcha_button_audio {
		height: 15px !important;
	}
	li.recaptcha_button_help {
		height: 16px !important;
	}
	ul#recaptcha_ul a, ul#recaptcha_ul a:link, ul#recaptcha_ul a:active, ul#recaptcha_ul a:visited, , ul#recaptcha_ul a:hover {
		text-decoration: none;
		margin: 0;
		padding: 0;
	}
	ul#recaptcha_ul a img {
		border: 0 none !important;
		display: block;
	}
	div#recaptcha_logo {
		float: left;
		margin: 5px 0 0 10px;
		padding: 0;
	}
</style>
<div id="recaptcha_widget">
	<div id="recaptcha_widget_content">

		<div id="recaptcha_image"></div>
		<div class="recaptcha_only_if_incorrect_sol" style="color:red">__ERROR__</div>

		<div id="recaptcha_input">
			<span class="recaptcha_only_if_image">__WORDS__</span>
			<span class="recaptcha_only_if_audio">__NUMBERS__</span>
			<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
		</div>

		<div id="recaptcha_controls">
			<ul id="recaptcha_ul">
				<li id="recaptcha_refresh" class="recaptcha_button_refresh"><a href="javascript:Recaptcha.reload()" title="__RELOAD__" ><img src="__SOURCEWEBPATH__/refresh.png" /></a></li>
				<li id="recaptcha_audio" class="recaptcha_only_if_image recaptcha_button_audio"><a href="javascript:Recaptcha.switch_type('audio')" title="__GETAUDIO__" ><img src="__SOURCEWEBPATH__/audio.png" /></a></li>
				<li id="recaptcha_text" class="recaptcha_only_if_audio recaptcha_button_text"><a href="javascript:Recaptcha.switch_type('image')"  title="__GETIMAGE__" ><img src="__SOURCEWEBPATH__/text.png" /></a></li>
				<li id="recaptcha_gethelp" class="recaptcha_button_help"><a href="javascript:Recaptcha.showhelp()" title="__GETHELP__" ><img src="__SOURCEWEBPATH__/help.png" /></a></li>
			</ul>
			<div id="recaptcha_logo"><img src="__SOURCEWEBPATH__/logo.png" /></div>
		</div>
	</div>
</div>

zenphoto gère l'insertion de cette page et vous pouvez voir le résultat de cette intégration et de cette customisation ici http://dev.vincentbourganel.fr/page/contact


les problèmes rencontrés :

les règles

	div#recaptcha_input span 
		text-align: left !important;
	}

et

	ul#recaptcha_ul {
		margin: 0;
		padding: 0;
	}

ne s'appliquent pas et se sont les règles générales du thèmes qui s'appliquent, ce qui me met le bazard.

avez-vous un idée à me sugérer pour résoudre ce problème rencontré uniquement sur les anciens navigateurs (mais qui continuent à être utilsié, principalement dans le monde du travail...) ?

merci d'avance pour votre aide
Modifié par vincent3569 (05 Jun 2013 - 18:56)

bon, j'ai résolu le pb en remplaçant les <span> par des <div>.
idem pour les <ul><li>.