28173 sujets

CSS et mise en forme, CSS3

Interprétation différente selon extension de fichier [résolu]

Bonjour,

Je ne savais pas trop comment titre ce sujet. Quelques explications :
Je dois appliquer une charte graphique. On m'a donné à cette occasion une page html avec un feuille de style .css

Si j'ouvre la page html avec IE6 ou firefox => un message m'indique que IE a restreint l'affichage du contenu actif de ce fichier. Si j'autorise le contenu bloqué, le css est bien appliqué, la page est conforme aux attentes

Je copie / colle le code html dans Visual Studio (je dois développer en .NET) et indique l'emplacement du CSS => Je n'ai pas de message de la part d'IE. Par contre le CSS n'est qu'à moitié appliqué Smiley confus . Si j'ouvre la même page avec firefox : pas de probleme

Je copie / colle le code html dans un fichier .php (pour tester) et indique l'emplacement du CSS => Je n'ai pas de message de la part d'IE. Par contre le CSS n'est qu'à moitié appliqué Smiley confus . Si j'ouvre la même page avec firefox : pas de probleme

Donc là, je suis un peu perdu.... Voici pour exemple quelques morceaux de la feuille de style qui ne passe pas :


#pied   {
	text-align:center;
  }
#pied  > span:before {
	content: "|";
	margin:0 10px;
  }

S'applique à 

<p id="pied">© Ma société 2007 <span><a href="#">Charte de bon usage</a></span>  <span><a href="#">Contacts</a></span>  <span><a href="#">Plan du site</a></span></p>




#connexion input[type=submit] {
	background: url(../Images/small_button.png)  no-repeat;
	width:100px;
	margin-right:20px;
}
#connexion input[type=button] {
	background: url(../Images/large_button.png)  no-repeat;
	width:180px;
}


S'applique à 

<div id="data">
     	<form method="post" action="/un/chemin" id="connexion">
	<h1>Bienvenue sur xxxx.</h1>
	<p>Descriptif en une ou deux phrases de l'application. Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
	Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
		<fieldset>
			<label for="nom"><input type="text" name="nom" id="nom"  />Nom :
			</label>
			<br />
			<label for="password"><input type="text" name="password " id="password" />Mot de passe :
			</label>
			<br />
			<input type="submit" value="Connexion" />
			<input type="button" value="Changer de mot de passe" />
			
		</fieldset>
		<p>Vous n'êtes pas identifié sur cette application, ou si vous désirez des renseignements, contactez trucTruc au XX XX</p>
		<p>Responsable d'application : Yyyyy Yyyyy</p>
	</form><!-- fin de formulaire de connexion -->
</div><!-- fin data -->


Vous auriez une idée ??

Tsinao
Modifié par tsinao (18 May 2007 - 17:09)
Les sélecteur d'attributs, sélecteurs d'enfant et pseudo-sélecteur :before ne sont pas supportés par IE6. Les styles associés ne seront donc pas appliqués.

Si ça passait lorsque tu as ouvert la page HTML la première fois, c'est sans doute qu'un script Javascript venait palier aux manquements d'IE 6 (et peut-être 7) ?
Merci pour cette réponse (super rapide en plus Smiley smile ).

Pour IE7 il y a effectivement des scripts JS qui sont appelés (entre des balises [if lt IE 8]) mais c'est tout ... bon je vais passer par le JS à ce moment là.

Merci bien,
Tsinao
Bonjour,

a écrit :
entre des balises [if lt IE 8]


Il ne s'agit pas d'un script Javascript mais de commentaires conditionnels. Faire une recherche dans la FAQ. Smiley cligne

Bonne continuation.
Romain
yodaswii a écrit :
Il ne s'agit pas d'un script Javascript mais de commentaires conditionnels. Faire une recherche dans la FAQ. Smiley cligne

Certes, mais rien ne dit que les commentaires conditionnels ne permettent pas d'appeler, pour IE7 et inférieurs, des scripts Javascript.
a écrit :
Certes, mais rien ne dit que les commentaires conditionnels ne permettent pas d'appeler, pour IE7 et inférieurs, des scripts Javascript.


Excat Smiley cligne . Jamais pensé à utiliser les commentaires conditionnels dans le cadre d'utilisation de scripts Javascript.

<edit>Pas très logique d'ailleurs, pour faire des ajustements CSS ... Smiley sweatdrop </edit>
Modifié par yodaswii (18 May 2007 - 15:54)
Effectivement j'ai parlé de "balises" mais le bon terme est "commentaires conditionnels".

Les JS appelés dans le commentaire conditionnel [if lt IE 8] semble avoir été péchés sur le site de Dean Edwards (http://dean.edwards.name/). Seuls deux scripts sont appelés :
- ie7-standard-p.js
- ie7-css3-selectors.js

Mais ils ne semblent pas palier les manques d'IE (pas ceux que je veux en tout cas Smiley smile ).

Je vais chercher sur son site quels autres script JS pourraient m'aider.

Tsinao
tsinao a écrit :
Mais ils ne semblent pas palier les manques d'IE (pas ceux que je veux en tout cas Smiley smile ).

Tu disais pourtant que ça marchait avec le gabarit fourni, non ? Il serait tout de même plus simple de partir de là, et de reproduire ça avec ton application dynamique.
a écrit :
Tu disais pourtant que ça marchait avec le gabarit fourni, non ? Il serait tout de même plus simple de partir de là, et de reproduire ça avec ton application dynamique.


Oui, la page maquette en .html appelant le css et les deux scripts JS fonctionne sous IE (si j'autorise le contenu actif bloqué). Mais si je

.... Smiley confused ....

En fait les .js ont bien leur utilité mais vu que j'ai utilisé la mauvaise syntaxe pour le chemin (en .NET un ~ dans le href permet de "partir" de la racine du site. Ce ~ ne fonctionne apparement pas avec l'attribut src).

Bon, je vais vous laisser. Je ferme la porte derrière moi Smiley cligne
Tsinao
C'est ça.

Mon projet est organisé comme suit :
Root (racine du projet)
Root/Include (avec un rep pour les images, un autre pour le JS et un dernier pour les feuilles de styles

Root/aspx (c'est le langage utilisé)
Root/aspx/Mon_Module1 (par exemple Root/aspx/Admin)
Root/aspx/Mon_Module2
Root/aspx/....

au début j'étais parti sur un chemin relatif (../Include) mais ça impliquait de changer les chemins à chaque fois que je change de répertoire. Je préfère donc avoir des chemins absolus. En utilisant le ~ je n'aurai pas de souci si le projet est déployé sur une plateforme mutualisée IIS (ce qui m'était arrivé sur un autre projet et j'avais du changer tous les chemins sur chaque page).

Cela dit, ce n'est peut-être pas la meilleure solution... Je n'ai pas creusé plus que ça.
Modifié par tsinao (18 May 2007 - 17:11)
Sujet clos
Aller à