28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Feuille de style qui "ne passe pas" sous firefox

Bonjour,

J'ai une page, toute bête. Avec une feuille de style attachée. Sous IE8, aucun souci, àa passe sans problème. Mais sous firefox, c'est comme si la feuille de style n'était pas du tout prise en compte ...

EDIT : J'ai testé cette page avec chrome, safari, opéra, ie8 et firefox. Elle est correctement affichée avec tous ces navigateurs, sauf firefox ...

EDIT BIS : En incluant directement le style dans le code HTML, la page est affichée correctement sous firefox ...

C'est sûrement un truc tout bête que je ne vois plus ...

Merci de votre aide !!!

La page concernée : http://www.support.lse.fr/pos.php

Le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<link rel="stylesheet" href="/css/template.css" type="text/css" media="screen" charset="charset=iso-8859-1" />
<link rel="stylesheet" href="/css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="charset=iso-8859-1" />


<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/jquery.validationEngine-fr.js" type="text/javascript"></script>  
<script src="/js/jquery.validationEngine.js" type="text/javascript"></script>

<title>Document sans nom</title>
</head>

<body>
   
  
      
      <form id="formID" class="formular" method="post" action="checklog.php">
        <fieldset>
          <legend>Identification</legend>
          
          <label>
            <span>Email  : </span>
            <input class="validate[required,custom[email]] text-input" type="text" name="mail" id="mail"  />
          </label>
          
          <label>
            <span>Mot de passe : </span>
            <input class="validate[required,length[4,12]] text-input" type="password" name="pwd"  id="pwd" />
          </label>
          
        
        	<p><input class="submit" type="submit" name="Valider" value="Valider" /></p>
        </fieldset>
			</form>
      
     
</body>
</html>


Le code css :

body{ margin:0; padding:0;}

form.formular {
	font-family: tahoma, verdana, "sans-serif";
	font-size: 12px;
	padding: 20px;
	/*border: 1px solid #A5A8B8;*/
	width:450px;
	margin: 0 auto;
}

.formular fieldset {
	margin-top: 20px;
	padding : 15px;
	border: 1px solid #B5B8C8;
	
}

.formular legend {
	font-size: 12px;
	color: #15428B;
	font-weight: 900;
}

.formular fieldset label {
	float: none;
	text-align: inherit;
	width: auto;
}

.formular label span {
	color: #000;
}

.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 5px;
}

.formular .text-input {
	width: 250px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular textarea {
	width: 250px;
	height:70px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.formular span.checkbox, .formular .checkbox {
	display: inline;
}

.formular .submit {
	background: url('/img/form/button-bg.png') repeat-x;
	border: 1px solid #AAA;
	padding: 4px;
	margin-top: 20px;
	float: right;
	text-decoration: none;
	cursor:pointer;
}

.formular hr {
	clear: both;
	visibility: hidden;
}

.formular .fc-error {
	width: 350px;
	color: 555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}


Merci d'avance pour votre aide ...
Modifié par pols77 (13 Nov 2009 - 11:29)
passe ton css sous le W3C css validator
et on s'apercoit deux erreurs :
line 4 : mets tes tahoma et verdana entre quillement
line 90 : color #555 n'existe pas
Bonjour Wamdeus, et merci pour ton aide.

Les modifications ont été apportées, la feuille de style est validée. Mais le problème persiste.
Comme si Firefox ne chargeait pas la feuille. Smiley ohwell

FireBug indique : Aucune règle n'est définie dans cette feuille de style Smiley eek
Heu, ... y'a un truc que je pige pas ..
<form id="formID" class="formular" method="post" action="checklog.php">
il est où ton #formID ?
Smiley confused heu ... mon #formID n'est nulle part ...

Mais après suppression, nettoyage des cache, c'est idem ...
Bien sûr !

Alors pour le html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="/css/template.css" type="text/css" media="screen" charset="charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
	<form  class="formular" method="post" action="checklog.php">
  	<fieldset>
    	<legend>Identification</legend>
				<label>
        	<span>Email  : </span>
       		<input class="validate[required,custom[email]] text-input" type="text" name="mail" id="mail"  />
        </label>
          
        <label>
         	<span>Mot de passe : </span>
          <input class="validate[required,length[4,12]] text-input" type="password" name="pwd"  id="pwd" />
         </label>
                  
        	<p><input class="submit" type="submit" name="Valider" value="Valider" /></p>
		</fieldset>
	</form>
 </body>
</html>


Et pour le css :

body{margin:0; padding:0;}

form.formular {
	font-family: tahoma, verdana, sans-serif;
	font-size: 12px;
	padding: 20px;
	border: 1px solid #A5A8B8;
	width:450px;
	margin: 0 auto;
}

.formular fieldset {
	margin-top: 20px;
	padding : 15px;
	border: 1px solid #B5B8C8;	
}

.formular legend {
	font-size: 12px;
	color: #15428B;
	font-weight: 900;
}

.formular fieldset label {
	float: none;
	text-align: inherit;
	width: auto;
}

.formular label span {
	color: #000;
}

.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 5px;
}

.formular .text-input {
	width: 250px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	/*background: #FFF url('/img/form/text-bg.gif') repeat-x;*/
}

.formular textarea {
	width: 250px;
	height:70px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	/*background: #FFF url('/img/form/text-bg.gif') repeat-x;*/	
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.formular span.checkbox, .formular .checkbox {
	display: inline;
}

.formular .submit {
	/*background: url('/img/form/button-bg.png') repeat-x;*/
	border: 1px solid #AAA;
	padding: 4px;
	margin-top: 20px;
	float: right;
	text-decoration: none;
	cursor:pointer;
}

.formular hr {
	clear: both;
	visibility: hidden;
}

.formular .fc-error {
	width: 350px;
	/*color: 555;*/
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}
Essaie ça plutôt :
<link href="css/template.css" rel="stylesheet" type="text/css" media="screen"/>
Bonjour Ralf ... Et merci !!! Je devrais plutôt dire : Merci ... Smiley biggrin

Effectivement, là ça fonctionne parfaitement ! Est-ce la définition du charset qui pose problème ? L'ordre des propriétés ?

Si il y a une explication, je suis preneur, pour me coucher moins bête ce soir ...

En tous cas merci encore, et je vais -avec joie- tagger mon post avec un joli [RESOLU]

PS : Tu suis les tutos d'Emob ? CF l'avatar ... Smiley lol
Ben, perso j'ai jamais mis de ma vie un charset dans le lien appelant la feuille de style. Je ne voudrais pas dire de bêtise, mais je ne pense pas que ce soit correct de le faire (en revanche, je le mets en début de feuille de style, d'ailleurs c'est ce que te met par défaut dreamweaver lors de la création d'une feuille :
@charset "utf-8";
/* CSS Document */

)

Ce qui est sûr c'est que c'est en le retirant que le lien a été compris par Firefox. Pour info, ça marchait avec le charset dans l'aperçu de dreamweaver, ainsi que dans la série des Internet Explorer.

PS : pour ta question, je ne sais plus où j'ai trouvé ce tuto, mais en grand fan de zombies, j'étais ravi !
Modifié par Ralf (13 Nov 2009 - 11:45)
Sujet clos
Aller à