Bonjour à tous !!!

Je n'en peux plus. Je passe mon temps à faire des choses hyper complexes en php et c'est toujours sur des bugs de débuttant à la con qu'on passe 70% de son temps en prog.

Bref : je déteste le design mais faut bien s'y coller.

J'ai réussi à faire un truc correcte sur IE 7 et FF avec deux feuilles de style différentes.

Mais là ou ça se gatte, c'est avec IE6 : la feuille d'IE 7 ne va pas du tout : tout bouge, rien ne va.

Qu'a cela ne tienne, me dis je, je vais refaire une troisième feuille de style (les web-masters n'ont que ça à foutre, merci Microsoft).

Mais ce serait trop beau comme ça : IE 6 veut absolument prendre ma feuille Firefox.

J'ai essayé plein de choses mais rien à faire. En plus, dans 60% des cas (et je ne comprend absolument pas comment) le design se trouve affecté sur FF et IE7, alors que je n'y touche pas.

Internet Explorer est la calamité informatique du siècle !!

Pitié, aidez moi avant que je me pende.

Merci !

Flyerjet

Les feuilles sont additionnelles. Tu crées une feuille pour tout le monde (pas seulement FF, ensuite il y a aussi Safari, Chrome, Opera, Konqueror... qui font largement 10% des utilisateurs). Ensuite, les feuilles ajoutent des style ou remplacent des style précédemment donnés pour IE 6 et 7 avec les commentaires conditionnels.

Il faut toujours essayer d'en utiliser le moins possible. Je sais, c'est difficile.

Oui mais, justement, je n'arrive pas à créer une feuille de style juste pour IE6 et précédents ...

C'est quand même faisable, non ?

J'ai utilisé les commentaires conditionnels mais ça ne marche pas.

Je voudrai : - 1 CSS pour IE 7 et les plus récents
- 1 css pour IE 6 et les plus anciens
- 1 css pour les vrais navigateurs ...

commentaires conditionnels.

Si t'as autant de problème c'est que t'as mal goupillé ton truc. Faudrait du code pour qu'on puisse t'aider. Et que tu postes dans le bon forum accessoirement.

IE6 est spécial, mais depuis IE7 il y a « peu » de choses a faire pour que ça marche partout.

'fin bon, c'est pas pour rien que c'est un métier

Citation : nod_

'fin bon, c'est pas pour rien que c'est un métier

==> C'est tellement vrai !!!

Mais je ne sais pas comment on peut vouiloir faire ça Oo perso c'est par obligation parceque je ne trouve pas de designer pour mettre en page mes créations n'est pas

Bon, plus sérieusement, voilà ce que j'ai :

<link rel="stylesheet" media="screen" type="text/css" title="style" href="FF.css" />
	   <!--[if gte IE 7]>
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="IE.css" />
	   <![endif]-->
	   <!--[if lt IE 7]>
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="IE6.css" />
	   <![endif]-->

Avec ce code, quoique je mette dans IE6.CSS, rie ne change sur IE6.

J'ai aussi essayé ça :

<!--[if !IE]> <link rel="stylesheet" media="screen" type="text/css" title="style" href="FF.css" /><![endif]-->
	   <!--[if gte IE 7]>
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="IE.css" />
	   <![endif]-->
	   <!--[if lt IE 7]>
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="IE6.css" />
	   <![endif]-->

Mais ça bug de partout ...

Mais oui, mais ça on s'en fout. Il faut le contenu du HTML et du CSS sinon on peut pas t'aider.

Ouai, il y a un problème de structure. Avec les designs les plus complexes, tu doit arriver à un fichier CSS de 40 lignes maxi pour IE 7 et éventuellement encore 20 lignes de plus pour IE 6. Ensuite je répète pour être sûr que tu as compris l'affaire, ton CSS pour Firefox est aussi lu par Internet Explorer. Les CSS IE et IE6 sont additionnels. Et ça me gène sérieusement que tu appelles ta feuille de style FF, appelle-là valide ou W3C, CSS2, ... Ne considère pas qu'il n'y a que Firefox qui mérite le titre de navigateur, c'est ce qu'a fait Bill Gates. Il faut qu'il y ait plusieurs navigateurs et de la concurrence. Pour l'instant il y a juste un déséquilibre dans cette concurrence sous Windows, mais si tu veux que le web avance, il faudra toujours considérer qu'il y a plusieurs navigateurs et que c'est normal. Ensuite, c'est au codeur d'être valide, de penser à l'évolution du web etc.

Oui enfin je l'ai appelé FF comme j'aurai pu l'appeler choucroute. J'utilise moi même assez régulièrement safari et conqueror. EN fait , ça vient du tuto du SDZ "faire un site compatible FF et IE". De toute façon le rendu est sensiblement égal sur tous les navigateurs autres que Microsoft.

Bref.

Je vous file le HTML et le CSS mais j'ai très très peur que vous me crucifiez avec des clous rouillés après m'avoir forcé à écouter l'intégrale de Jean Michel Jarre et enfoncés des CD de Windows Millénium sous les ongles parce que c'est pas propre et standard du tout du tout [honte]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title><?php echo $donnees_affichage_page['nom']; ?></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="style" href="FF.css" />
	   <link rel="icon" type="image/png" href="design/favicon.png" />
	   <!--[if IE ]><link rel="shortcut icon" type="image/x-icon" href="design/favicon.ico" /><![endif]-->
	   <!--[if IE]>
	   <link rel="stylesheet" media="screen" type="text/css" title="style" href="IE.css" />
	   <![endif]-->
	   
   </head>
   <body>
   
	<div class="en-tete" id="top">
	
	</div>
	
	
	<div class="corps">
			<div class="menu">
				<div class="separation"></div>
				
					
		<?php			
		  while($liste_pages=mysql_fetch_array($liste_pages_brut))
		  {
		  	$nbre_car = strlen($liste_pages['nom']);
			
			$type_lien = '';
			
			if($nbre_car >= 11)
			{$type_lien='-2l';}
			
		   echo '<div class="lien'.$type_lien.'">	<ul><li><a href="index.php5?page='.$liste_pages['id'].'" title="'.$liste_pages['description'].'">'.$liste_pages['nom'].'</a></li></ul></div>';
		   $sous_page_associee_brut=mysql_query("SELECT * FROM pages WHERE parent='".$liste_pages['id']."' ORDER BY ordre")or die(mysql_error());
		      if($sous_page_associee_brut != null)
		      {
						while($sous_page_associee=mysql_fetch_array($sous_page_associee_brut))
						{
						 $nbre_car_ss = strlen($sous_page_associee['nom']);
						 
						 $type_ss_lien='';
						 
						 if($nbre_car_ss >= 12)
						 {$type_ss_lien='-2l';}
						
						 echo '<div class="sous-lien'.$type_ss_lien.'">	<ul><li><a href="index.php5?page='.$sous_page_associee['id'].'" title="'.$sous_page_associee['description'].'">'.$sous_page_associee['nom'].'</a></li></ul></div>';
						}
		      }
		  }
		?>
				<div class="up"><a href="#top"><img src="design/up.jpg"/><p>Remonter</p></a></div>
			</div>
			

			<div class="description">
				<div class="description-en-tete">
				</div><p>
			<?php
			 echo parsage($donnees_affichage_page['description']);
			?></p>
			</div>
			
			<?php
			
			while($donnees_articles=mysql_fetch_array($donnees_articles_brut))
			{
				  setlocale(LC_ALL, 'fr_FR');
				  $date=strftime('%A %d %B à %Hh%M', $donnees_articles['date']);
			 echo '<div class="article">
				<div class="titre">
					<div class="titre-article"><h4>'.$donnees_articles['titre'].'</h4></div>
					<div class="auteur"><h5>Par '.$donnees_articles['auteur'].' le '.$date.'</h5></div>
				</div>
			<div class="article-corps"><p>';
			echo parsage($donnees_articles['corps']);
			echo '</p></div>
			<div class="barre-verticale"><img src="design/barre-verticale.jpg"/></div>
			<div class="article-pied"></div>
			</div>';
			}
			?>

						
			<div class="pied">
	
				<div class="contenu-pied"><p><em>« Le Cyber-Esp@ce de Mandres Les Roses »</em><br/> est une association à but non-lucratif, loi 1901.</p><p id="police">Ce site web utilise la police "Space Age". Pour un affichage optimal, nous vous recommandons de télécharger cette dernière sur <em><a href="http://mickeyavenue.com/fonts/spaceage/">le site de son auteur</a></em> (gratuit pour usage personnel).</p></div>
				<div class="gbweb"><a href="http://www.gbweb.fr"><img title="Réalisation -- Conception" src="design/gbweb.jpg"/></a></div>
			</div>
			
			
	
	</div>
	</div>
	
	
	
   
   </body>
</html>

FF.css

body, div, form, fieldset, ul, ol, table { margin: 0; padding: 0; }

body
{
 background-image : url("design/arriere-plan.jpg");
 margin : auto;
 padding-left : 1px;
 width : 900px;
 padding-top : 3px;
  font-family : comic sans ms, sans-serif;
 color : RGB(69,87,100);
}

.en-tete
{
  background-image : url("design/en-tete.jpg");
  width : 898px;
  height : 178px;
}

.corps
{
 width : 900px;
 position : absolute;
}


h4
{
 display : inline;
}

.menu
{
 bottom : 10px;
 top : 0px;
 width : 195px;
 background-image : url("design/menu.jpg");
 float : left;
 height : 97,5%;
 position : absolute;
}

.separation
{
 height : 8px;
 width : 188px;
 margin-left : 1px;
 margin-bottom : 10px;
 background-image : url("design/separation.jpg");
}


.lien
{
  height : 28px;
  width : 164px;
  margin-left : 1px;
  padding-left : 24px;
}

.lien:hover
{
  background-image : url("design/Lien-survole.jpg");
  height : 28px;
  width : 164px;
  margin-left : 1px;
}

.lien li
{
 padding-top : 5px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 11pt;
}

.lien li a
{
 text-decoration :none;
 color : white;
}


.lien-2l
{
  height : 39px;
  width : 164px;
  margin-left : 1px;
  padding-left : 24px;
}

.lien-2l:hover
{
  background-image : url("design/Lien-survole-2l.jpg");
  height : 39px;
  width : 164px;
  margin-left : 1px;
}

.lien-2l li
{
 padding-top : 2px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 11pt;
}

.lien-2l li a
{
 text-decoration :none;
 color : white;
}

.sous-lien
{
  height : 28px;
  width : 150px;
  text-indent : 2px;
  margin-left : 1px;
  padding-left : 22px;
  line-height : 10px;
}

.sous-lien:hover
{
  background-image : url("design/sous-Lien-survole.jpg");
  height : 28px;
  width : 150px;
  text-indent : 2px;
}


.sous-lien li
{
 margin-top : -14px;
 padding-top : 7px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 10pt;
 margin-left : 16px;
}

.sous-lien li a
{
 text-decoration :none;
 color : white;
}

.sous-lien-2l
{
  height : 35px;
  width : 150px;
  text-indent : 2px;
  margin-left : 1px;
  padding-left : 22px;
  line-height : 10px;
}

.sous-lien-2l:hover
{
  background-image : url("design/sous-Lien-survole-2l.jpg");
  height : 35px;
  width : 150px;
  text-indent : 2px;
}


.sous-lien-2l li
{
 margin-top : -14px;
 padding-top : 7px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 10pt;
 margin-left : 16px;
}

.sous-lien-2l li a
{
 text-decoration :none;
 color : white;
}

.titre
{
  background-image : url("design/en-tete-article.jpg");
  width : 703px;
  height : 60px;
  margin-top : 0px;
}

.pied
{
 width : 897px;
 height : 119px;
 background-image : url("design/pied.jpg");
}

.description
{
 width : 705px;
 background-image : url("design/arriere-plan-description.jpg");
 background-position: bottom right;
 background-repeat : no-repeat;
 padding-left : 196px;
 padding-bottom : 8px;
}

.description p
{
 padding-left : 8px;
 padding-right : 12px;
 text-align : justify;
 margin-top : 0px;
}

.description-en-tete
{
 width : 705px;
 height : 7px;
 background-image : url("design/en-tete-description.jpg");
}

.titre-article
{
 height : 60px;
 float : left;
 position : relative;
 bottom : 16px;
 width : 400px;
}

.auteur
{
 height : 60px;
 float : right;
 margin-right : 8px;
 width : 275px;
 position : relative;
 bottom : 0px;
 top : 13px;
}

.titre-article h4
{
 margin-bottom : 20px;
 position : absolute;
 left : 32px;
 font-size : 17pt;
 font-family : comic sans ms, sans-serif;
 color : RGB(69,87,100);
 font-weight : bold;
}

.auteur h5
{
 margin-bottom : 0px;
 position : absolute;
 text-align : right;
 right : 4px;
 font-size : 12px;
}

.angle-mort
{
 width : 36px;
 height : 136px;
 float : right;
 padding-bottom : 0px;
 vertical-align : bottom;
}

.gbweb
{
 width : 190px;
 height : 90px;
 float : right;
 margin-right : 12px;
 margin-top : 16px;
}

.contenu-pied
{
 width : 480px;
 height : 100px;
 margin-left : 205px;
 margin-top : 8px;
 color : white;
 float : left;
 font-size : 9pt;
 font-weight : bold;
}

.contenu-pied p
{
 margin-top : -2px;
}

#police
{
 font-size : 8pt;
 text-align : justify;
}

#police em a
{
 text-decoration : none;
 color : white;
}

.gbweb a img
{
 border : 0px;
}

.up
{
position : absolute;
 width : 195px;
 height : 100px;
 color : white;
 bottom : 2px;
}

.up a
{
 text-decoration : none;
 text-align : center;
 margin : auto;
 color : white;
}

.up a img
{
  border : 0px;
  margin-left : 75px;
}

.up p
{
 margin-top : 0px;
  text-align : center;
}

.article-corps
{
 width : 100%;
 min-height : 120px;
}


.article-pied
{
  width : 670px;
  height : 39px;
  background-image : url("design/article-pied.jpg");
}

.article
{
 width : 705px;
 background-image : url("design/arriere-plan-article.jpg");
 background-position: right;
 padding-left : 196px;
 text-indent : 8px;
}

.article p
{
 padding-left : 8px;
 padding-right : 16px;
 text-align : justify;
 margin-top : 0px;
 word-wrap : break-word;
}

.barre-verticale
{
 margin-top : -96px;
 float : right;
 height : 135px;
 width : 35px;
 margin-right : 8px;
}

.italic
{
 font-style : italic;
}

.souligne
{
 TEXT-DECORATION:underline;
}

.barre
{
 text-decoration: line-through;
}

.petit
{
 font-size : 8pt;
}

.gros
{
 font-size : 17pt;
}

.tgros
{
 font-size : 28pt;
}

IE.CSS :

body, div, form, fieldset, ul, ol, table { margin: 0; padding: 0; }

body
{
 background-image : url("design/arriere-plan.jpg");
 margin : auto;
 padding-left : 1px;
 width : 900px;
 padding-top : 3px;
 font-family : comic sans ms, sans-serif;
 color : RGB(69,87,100);
}

.en-tete
{
  background-image : url("design/en-tete.jpg");
  width : 898px;
  height : 178px;
}

.corps
{
 width : 900px;
 position : absolute;
}


.article
{
 width : 705px;
 background-image : url("design/arriere-plan-article.jpg");
 background-position: right;
 padding-left : 196px;
 min-height : 250px;
 text-indent : 8px;
}

.article p
{
 padding-left : 18px;
 padding-right : 12px;
 text-align : justify;
 margin-top : 0px;
 padding-bottom : 38px;
 word-wrap : break-word;
}

h4
{
 display : inline;
}

.menu
{
 bottom : 10px;
 top : 0px;
 width : 195px;
 background-image : url("design/menu.jpg");
 float : left;
 height : 97,5%;
 position : absolute;
}

.separation
{
 height : 8px;
 width : 188px;
 margin-left : 1px;
 margin-bottom : 10px;
 background-image : url("design/separation.jpg");
}

.lien:hover
{
  background-image : url("design/Lien-survole.jpg");
  height : 28px;
  width : 164px;
  margin-left : 1px;
}

.lien
{
  height : 28px;
  width : 164px;
  margin-left : 1px;
  padding-left : 24px;
}

.lien li
{
 padding-top : 0px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 11pt;
}

.lien li a
{
 text-decoration :none;
 color : white;
}

.lien-2l:hover
{
  background-image : url("design/Lien-survole-2l.jpg");
  height : 39px;
  width : 164px;
  margin-left : 1px;
}

.lien-2l
{
  height : 39px;
  width : 164px;
  margin-left : 1px;
  padding-left : 24px;
}

.lien-2l li
{
 padding-top : 0px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 11pt;
}

.lien-2l li a
{
 text-decoration :none;
 color : white;
}

.sous-lien
{
  height : 12px;
  width : 150px;
  text-indent : 2px;
  margin-left : 1px;
  padding-left : 22px;
  top : 0px;
  color : white;
  padding-bottom : 4px;
}

.sous-lien:hover
{
  background-image : url("design/sous-Lien-survoleIE.jpg");
  height : 12px;
  width : 150px;
  text-indent : 2px;
  padding-bottom : 4px;
}


.sous-lien li
{
 margin-top : 0px;
 padding-top : 2px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 10pt;
 margin-left : 2px;
 margin-bottom : 12px;
 position : absolute;
}

.sous-lien li a
{
 text-decoration :none;
 color : white;
}

.sous-lien-2l
{
  height : 31px;
  width : 150px;
  text-indent : 2px;
  margin-left : 1px;
  padding-left : 22px;
  top : 0px;
  color : white;
}

.sous-lien-2l:hover
{
  background-image : url("design/sous-Lien-survole-2lIE.jpg");
  height : 31px;
  width : 150px;
  text-indent : 2px;
}


.sous-lien-2l li
{
 margin-top : 0px;
 padding-top : 6px;
 color : white;
 font-family : Space Age, Comic Sans MS, sans-serif;
 font-size : 10pt;
 margin-left : 2px;
 margin-bottom : 12px;
 position : absolute;
 width : 150px;
}

.sous-lien-2l li a
{
 text-decoration :none;
 color : white;
 width : 150px;
}

.titre
{
  background-image : url("design/en-tete-article.jpg");
  width : 703px;
  height : 60px;
  margin-top : 0px;
}

.pied
{
 width : 897px;
 height : 119px;
 background-image : url("design/pied.jpg");
}

.description
{
 width : 705px;
 background-image : url("design/arriere-plan-description.jpg");
 background-position: bottom right;
 background-repeat : no-repeat;
 padding-left : 196px;
 padding-bottom : 8px;
}

.description p
{
 padding-left : 8px;
 padding-right : 12px;
 text-align : justify;
 margin-top : 0px;
}

.description-en-tete
{
 width : 705px;
 height : 7px;
 background-image : url("design/en-tete-description.jpg");
}

.titre-article
{
 height : 60px;
 float : left;
 position : relative;
 bottom : -14px;
 width : 395px;
}

.auteur
{
 height : 60px;
 float : right;
 margin-right : 8px;
 width : 280px;
 position : relative;
 bottom : 0px;
 top : 33px;
}

.titre-article h4
{
 position : absolute;
 left : 32px;
 font-size : 17pt;
 font-weight : bold;
}

.auteur h5
{
 position : absolute;
 text-align : right;
 right : 4px;
 font-size : 12px;
}

.gbweb
{
 width : 190px;
 height : 90px;
 float : right;
 margin-right : 12px;
 margin-top : 16px;
}

.contenu-pied
{
 width : 480px;
 height : 100px;
 margin-left : 205px;
 margin-top : 8px;
 color : white;
 float : left;
 font-size : 9pt;
 font-weight : bold;
}

.contenu-pied p
{
 margin-top : -2px;
}

#police
{
 font-size : 8pt;
 text-align : justify;
}

#police em a
{
 text-decoration : none;
 color : white;
}

.gbweb a img
{
 border : 0px;
}

.up
{
position : absolute;
 width : 195px;
 height : 100px;
 color : white;
 bottom : 2px;
}

.up a
{
 text-decoration : none;
 text-align : center;
 margin : auto;
 color : white;
}

.up a img
{
  border : 0px;
  margin-left : 75px;
}

.up p
{
 margin-top : 0px;
  text-align : center;
}


.barre-verticale
{
 margin-top : -96px;
 float : right;
 background-image : URL("design/barre-verticale.jpg");
 height : 135px;
 width : 35px;
}

.italic
{
 font-style : italic;
}

.souligne
{
 TEXT-DECORATION:underline;
}

.barre
{
 text-decoration: line-through;
}

.petit
{
 font-size : 8pt;
}

.gros
{
 font-size : 17pt;
}

.tgros
{
 font-size : 28pt;
}

J'ai bien compris que les deux feuilles de style étaient lues, l'une venant corriger l'autre (cela étant, je l'ai compris très récemment). Cela veut donc dire que 75% de IE.css est superflu vis à vis de FF.css qui doit lui même contenir beaucoup de choses inutiles et/ou non conformes à ce qu'on attend d'un stylesheet propre.

Toujours est il que IE 6 ne semble pas prendre en compte les corrections apportées sur sa feuille de style perso.

Je hais le design, mais quand ça marche pas à ce point là, ça me donne des envies de suicide. D'autant que je suis très pressé par les délais. Bref, merci pour votre aide !!!

Les zéros sont vraimetn des gens biens

P.S. Si vous voulez (je dis bien si vous voulez, c'est purement hypothétique, je n'en demande pas tant) faire des tests sans avoir a passer par moi et perdre des heures, je peux vous filer un zip avec tous les éléments du "design"...

Ça sert à rien de remettre la même chose dans FF.css et IE.css. 3ème édition : IE lit la feuille FF.css puis IE.css et les deux s'additionne.
Ensuite, tu peux utiliser un hack très intéressant qui allègera tes feuilles.

div
{
     width:200 !important;
     padding-left:5px;
     padding-right:3px;
     border:2px solid black;
     margin:10px;
     width:212px; // Correction pour mauvaisnavigateur
     // Normalement, un navigateur ajoute le border, le margin et le padding à width, IE n'ajoute que le margin
     // Mais IE ne comprend pas !important qui signifie : valeur définitive
     // Donc le deuxième width est lu par IE 4,5,6 et pas par les autres
}

Citation : Flyerjet

J'ai bien compris que les deux feuilles de style étaient lues, l'une venant corriger l'autre (cela étant, je l'ai compris très récemment). Cela veut donc dire que 75% de IE.css est superflu vis à vis de FF.css qui doit lui même contenir beaucoup de choses inutiles et/ou non conformes à ce qu'on attend d'un stylesheet propre.

Toujours est il que IE 6 ne semble pas prendre en compte les corrections apportées sur sa feuille de style perso.

...

Malheureusement, je pars en vacances demain...
Donc tout ça attendra, même si ça m'arrange pas du tout du tout du tout ...

Merci pour la technique du !important que je me calle derrière l'oreille en attendant mon retour ...