28173 sujets

CSS et mise en forme, CSS3

[Résolu] Syntaxe de commentaire conditionnel pour IE

Bonjour,
Je viens de me rendre compte d'un probleme d'affichage sur mon site,
il ne veux pas s'afficher correctement avec IE 6, la partie centrale se retrouve carrement en bas.
en bidouillant le css, j'ai vue que le probleme venai de la tail,seulement si je la laisse comme ca, ca deforme un peu mon visuel sur les autres navigateur, j'ai donc essayé de faire un syntaxe de commentaire conditionnel pour IE, mais ca ne marche pas ... et pourtant j'ai bien suivi les conseils de blog and blues

j'ai creer un fichier layout2.css avec just le code suivant :
#wrapper 
{
	float			: left;
	text-align		: left;
	padding			: 0px 18px 0px 18px;
	width			: 819px;  /*changement de la largeur pour IE*/

}


et dans mon index.php :

<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="<?php echo $jc_template_path;?>/css/template_css.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<link href="/css/layout2.css" rel="stylesheet" type="text/css" />
<![ endif]-->

<link href="<?php echo $jc_template_path;?>/css/layout.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $jc_template_path;?>/css/modules_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $jc_template_path;?>/css/mainmenu.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $jc_template_path;?>/css/sIFR-screen.css" rel="stylesheet" type="text/css" />


pourquoi ca ne marche pas ?
Modifié par richo (12 Aug 2007 - 13:51)
Salut,

si le nom de ta css est layout2.css et que tu fais un lien vers layout.css c'est normal que ça ne marche pas Smiley cligne .

*Edit: tiens ! tu as édité ton post... donc je suppose que l'erreur ne venait pas de là ? Smiley murf
Modifié par Heyoan (11 Aug 2007 - 19:23)
richo a écrit :
pourquoi ca ne marche pas ?

Déjà, est-ce que ça ne marche absolument pas (feuille de style non prise en compte), ou juste pas correctement?

Tu appelles d'abord layout2.css, puis layout.css. Si tu as des styles pour #wrapper déclarés dans layout.css, ils prendront le pas sur ceux déclarés dans layout2.css.

Ceci dit, si tu as besoin de corriger la largeur pour IE6, c'est que tu t'es planté quelque part. Par exemple que ta page est rendue par IE6 en mode Quirks, parce que tu n'as pas mis de Doctype ou bien mis un doctype HTML Transitional tronqué (sans URL de la DTD), ou autre erreur pouvant faire passer IE6 en mode Quirks.
Tu as raison Heyoan, je m'été trompé dans mon post, et j'ai rectifié le link, mais je ne pensais pas que tu serais aussi rapide a répondre Smiley cligne

Pour te répondre Florent, j'ai essayé de suivre les indications du tuto, qui dis de faire un 2eme css avec juste la modif a savoir le "width" de #wrapper. (si il y'a un autre moyen je dis pas non) lol. donc, je pense que la feuille de style n'est pas prise en compte.

pour l'hystoire de du doctype, je vous laisse le début de code de index.php

index.php :

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
$iso = split( '=', _ISO );
$jc_template_path = $mosConfig_live_site.'/templates/'.$mainframe->getTemplate();
?>

<!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>
<script src="<?php echo $jc_template_path; ?>/sifr.js" type="text/javascript"></script>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="<?php echo $jc_template_path;?>/css/template_css.css" rel="stylesheet" type="text/css" />

<link href="<?php echo $jc_template_path;?>/css/layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
   <link href="/css/layout2.css" rel="stylesheet" type="text/css" />
<![ endif]-->
<link href="<?php echo $jc_template_path;?>/css/modules_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $jc_template_path;?>/css/mainmenu.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $jc_template_path;?>/css/sIFR-screen.css" rel="stylesheet" type="text/css" />


layout.css :

#wrapper 
{
	float			: left;
	text-align		: left;
	padding			: 0px 18px 0px 18px;
	margin-left		: 2px;
	width			: 730px;
}


layout2.css :

#wrapper 
{
	float			: left;
	text-align		: left;
	padding			: 0px 18px 0px 18px;
	width			: 819px;

}


voilà, j'espère que c'est un peu plus clair Smiley smile
Modifié par richo (12 Aug 2007 - 01:15)
Pour vérifier si layout2.css est appliquée, il suffirait de déclarer une propriété de test. Par exemple:
#wrapper {font-size: 10em; color: red;}

Ça devrait te permettre de déterminer si la feuille de style est appliquée ou non. Smiley smile

Sinon, trois choses à vérifier:

1. Pour l'appel de la feuille de style layout2.css, le chemin est le suivant: 
href="/css/layout2.css"
tandis que pour l'appel de layout.css, on a le chemin suivant: 
href="<?php echo $jc_template_path;?>/css/layout.css"
Si les deux fichiers sont dans le même dossier, et que $jc_template_path n'est pas nul, il y a là un bête problème de chemin.

Au passage, ça ne sert à rien de nous donner du code PHP pour un problème de HTML/CSS. Il serait bien plus pertinent de nous fournir le code HTML généré par ce script PHP. D'ailleurs, s'il s'agit bien d'un problème de chemin, je pense que tu l'aurais constaté toi-même en regardant le code source généré. Smiley cligne

Ah oui, et bien sûr il faut garder l'appel à layout2.css en deuxième dans tous les cas.

2. Dans le code que tu indiques ici, tu mets <![ endif]-->. Je suppose que sur la vraie version tu n'as pas d'espace entre le crochet ouvrant et le «endif»? Il est probable que non, mais je demande juste pour vérifier. Smiley cligne

3. Pour cette histoire de largeur différente dans IE6, ça n'est pas normal. Du moment que IE6 rend bien la page en mode Standard et pas en mode Quirks, il ne devrait pas y avoir de telle différence. Là, soit tu vérifies par toi-même ce qui pourrait déclencher le mode Quirks, soit tu nous donnes un lien pour qu'on puisse constater ça de visu.

Pour info: le Doctype semble bon, par contre: pas de problogue XML, ni aucun autre caractère (sauf à la rigueur des espaces, tabulations, retours à la ligne) avant le Doctype. Si tu es en UTF-8, vérifie aussi que les fichiers de template sont bien encodés en UTF-8 sans BOM.
Modifié par Florent V. (12 Aug 2007 - 12:04)
Bonjour Florent,
alors j'ai essayé de suivre tes indications.
1/ effectivement en essayant et en modifiant mes lignes, j'ai mis un mauvais lien.
après correctif, et test, je peux te confirmer que la feuille layout2.css est bien pris en compte. Smiley smile
et après un 2eme test, ça maaarche !!! Smiley biggrin

en fait c'éte la position du link layout2.css qui été mauvaise dans un 1er temps, puis son adresse link dans un second Smiley confus

En tout cas Un gros merci a toi, sans toi je n'y serai jamais arrivé Smiley biggrin
Modifié par richo (14 Aug 2007 - 00:32)
Sujet clos
Aller à