28172 sujets

CSS et mise en forme, CSS3

Formulaire visible dans IE et Firefox mais pas GoogleChrome

Mise à jour de mon problème (17/03/09):

Après la solution trouvée il y a une semaine, j'étais heureuse....
Mais aujourd'hui, j'ai ouvert le site dans Google Chrome et mon formulaire n'y est pas visible (comme précédemment dans firefox).


==============================
Bonjour à tous,

Voici 2 heures que je planche sur mon problème sans trouver de solution.

Etat des lieux: j'ai un site qui tourne sous joomla 1.5.9 avec un template venant de "themza.com"

J'ai observé que "mon" formulaire d'identification est visible dans IE mais pas dans les autres navigateurs.

Dans IE7:
upload/20174-formIE.jpg
Dans Firefox:
upload/20174-formFF.jpg


Le passage du code correspondant au formulaire est celui-ci: 
<fieldset class="input">
	<p id="com-form-login-username">
		<label for="username">Identifiant</label><br />
		<input name="username" id="username" type="text" class="inputbox" alt="username" size="18" />
	</p>
	<p id="com-form-login-password">
		<label for="passwd">Mot de passe</label><br />
		<input type="password" id="passwd" name="passwd" class="inputbox" size="18" alt="password" />
	</p>
		<p id="com-form-login-remember">
		<label for="remember">Se souvenir de moi</label>
		<input type="checkbox" id="remember" name="remember" class="inputbox" value="yes" alt="Remember Me" />
	</p>
		<input type="submit" name="Submit" class="button" value="Connexion" />
</fieldset>



3 feuilles de style sont appelées dans l'entête de ma page: 


<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/themza_j15_01/css/template.css" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="/templates/themza_j15_01/css/ie7.css" type="text/css"  />
<![endif]-->


la feuille ie7.css n'existe pas mais j'ai laissé le code initial (tel qu'il est offert par THEMZA)
nulle part dans mes feuilles de style je trouve une définition
#com-form-login-username {};
Est-ce tout simplement le fait que IE affiche le formulaire même si l'identificateur n'est pas défini dans la feuille de style?

Dans ma feuille http://www.alpedejoyeuse.net/templates/themza_j15_01/css/template.css, j'ai ajouté ces quelques lignes que je ne comprends pas mais que j'ai trouvées dans le template initial de joomla (milkyway)

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }
form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }


J'avoue que je ne comprends pas le fonctionnement des fieldset et des form#form ... je ne comprends que les identifiants qui commencent pas # et non form# Smiley eek

Si qqn peu me donner des idées, je lui en serai très reconnaissante Smiley confused

Murielle
Modifié par mpiron (17 Mar 2009 - 08:25)
Salut Murielle,

Tu as un problème de positionnement dans ton template. pour le résoudre, dans ton fichier template.css, si tu ajoute un position:absolute; pour ta déclaration form#com-form-login fieldset ça devrait marcher. Bon c'est pas des plus propre et tu devra jouer avec les propriété top/left pour aligner ton bloc, mais c'est fonctionnel... Après vu que tu as déjà bidouiller et que je ne connais pas la qualité du template, je ne peux pas te proposer mieux
Smiley langue

donc au final :
[code]
....
form#com-form-login fieldset {
position:absolute;

/* les deux lignes en dessous ne sont pas obligatoire et sont a modifier Smiley smile */
top:[l'espace en haut]px;
left:[l'espace à gauche]px;
....
}
Modifié par Mikerob (10 Mar 2009 - 23:31)
Merci à tous les deux.
La solution de gcyrillus fonctionne très bien.
Je suis allée voir la page d'explication mais je n'ai pas encore tout compris Smiley confus .
Je vais à présent faire l'essai avec la proposition de Mikerob pour voir si ca fonctionne également.

Encore merci.

Murielle
Ma solution fonction (testée avec Firebug ^^), mais n'est pas très propre, et peut avoir des effets de bord. Je te conseil donc de plutôt utilisé la proposition de gcyrillus (qui donne le même rendu que ta capture d'écran Smiley cligne ), et de creuser un peu les explication. Je pense que sa ne sera pas du temps de perdu.
Modifié par Mikerob (11 Mar 2009 - 14:33)
Bonjour Mikerob,

J'ai testé ta solution. Le positionnement absolu est un peu problématique (que ce soit en pourcentage ou en grandeur fixe) sur mon site.

Mais sinon, ta solution a l'avantage sur ma première version de CSS de faire afficher le formulaire. Smiley biggrin
J'ai au final choisi la solution de gcyrillus.
Merci à vous deux. Et je vais aller creuser les explications.
Après la solution trouvée il y a une semaine, j'étais heureuse....
Mais aujourd'hui, j'ai ouvert le site dans Google Chrome et mon formulaire n'y est pas visible (comme précédemment dans firefox).


Actuellement, le CSS ressemble à ceci: 


form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; } 

#com-form-login  {overflow:hidden;}

Modifié par mpiron (17 Mar 2009 - 08:28)
Sujet clos
Aller à