Se connecter avec
S'enregistrer | Connectez-vous

XHTML CSS [...]

Dernière réponse : dans Programmation

depuis juillet 2002 existe un forum du nom de mangaiken.
le webmaster qui devrait soccuper de construire le
site internet, n'a vraiment pas beaucoup de temps
avec ses etudes.
je me suis donc proposer de construire le site a sa place,
étant donné que je commence le webmastering^^

la tache n'est pas du tout facile comme j'utilise le xhtml.

voila mon probleme :
chaque navigateur a sa propre interpretation du
language:

avec firefox : le rendu est tres bon
mais avec internet explorer : cest catastrophique

je voudrais savoir 2 chose:

(1) est ce que ce serait possible que tout les navigateurs
affciche la meme page

(2) est ce que quelqu'un qui s'y connait en xhtml
pourrait me donner quelque astuces pour creer une bonne page web


arigato

Autres pages sur : xhtml css

Lassé par la pub ? Créez un compte

Malheureusement non. Il est impossible que Internet Explorer et Mozilla affichent le même résultat. Et ce, pour la simple et bonne raison que Internet explorer date de 1998 donc CSS et XHTML il connait pas trop. Il y a plein de propriétés CSS qu'il ne connaît pas.
Heureusement Microsoft nous a promis une mise à jour d'I.E d'ici la fin de l'année. En ésperant que la promesse soit tenue. :-P

Quelques idées en vrac (je suppose que tu es relativement familier avec les concepts de base xhtml/css).

Le premier vrai problème avec Internet Explorer, c'est qu'il peut fonctionner en deux modes distincts:
- le mode quirks
- le mode strict
Le mode quirks fonctionne avec "l'ancienne" implémentation fautive du box-model; le mode strict lui, est conforme au box-model w3c.
Le mode quirks est insupportable et donne de grosses différences avec les autres nav.
Il faut donc avant toute chose forcer le mode strict d'IE.

Secondement, il y a quelques pièges à éviter...
IE ne supporte pas les balises scripts auto-fermantes...
Nativement, il ne supporte pas (très peu) les sélecteurs css.
Il y a un nombre impressionant de bugs de rendu qui rendent css difficilement exploitable...
C'est pas évident de trouver une solution pour les objects...

Heureusement, il y a un fou dans le secteur (Dean Edwards) qui a développé une librairie js qui "fait fonctionner" Internet Explorer (presque) comme un navigateur normal.
Tu peux la trouver ici:
http://dean.edwards.name/IE7/


Si on reprend:
- forcer le mode strict = ne pas envoyer le prologue xml à IE (sinon il passe en quirks le con)
- avoir une page bien valide bien carrée
- si tu acceptes d'avoir une grosse lib js, utiliser la lib de Dean Edwards

=> on peut commencer à parler css sérieusement


Un bout de code:

  1. <?php
  2. // On utilise php ici pour *ne pas* envoyer de prologue xml à IE
  3. // Attention, c'est pas complètement safe, si le client joue "déguisé"... mais bon hein  :D
  4. if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE')===false or isset($_GET['l33t_iesucks']))
  5. {
  6. // Attention, on suppose la page en utf8
  7.     echo '<?xml version="1.0" encoding="utf-8"?>'."\n";
  8. }
  9. ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
  10. <!-- on démarre, en précisant une langue... -->
  11. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr">
  12.     <head>
  13.     <!-- Quelques meta pour les types -->
  14.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  15.         <meta http-equiv="Content-Script-Type" content="text/javascript" />
  16.         <meta http-equiv="Content-Style-Type" content="text/css" />
  17.         <meta http-equiv="Content-Language" content="fr" />
  18.     <!-- Et puis, de quoi il s'agit, et par qui-->
  19.         <meta name="description" content="" />
  20.         <meta name="keywords" content="" />
  21.         <meta name="author" content="" />
  22.  
  23.     <!-- Un bô titre, une belle icône, et dire où est la maison... -->
  24.         <title></title>
  25.         <link rel="icon" type="image/png" href="icon.png" id="XhtmlIcon" />
  26.         <link rel="home" href="./" id="XhtmlHome" />
  27.  
  28.     <!-- Charger une feuille de style -->
  29.         <link href="lib/css/style.css" media="all" rel="stylesheet" type="text/css" title="Style par défaut" id="XhtmlStyleSheet0" />
  30.  
  31.     <!-- Une lib js perso -->
  32.         <*script type="text/javascript" xml:space="preserve" src="lib/js/fonctions.js"></script>
  33.     <!-- attention à ne pas fermer la balise, sinon IE plante... -->
  34.  
  35.     <!-- IE7 par Dean Edwards [on prend juste les sélecteurs] -->
  36.         <!--[if lt IE 7]>
  37.         <*script src="lib/js/ie7_0.8/src/ie7-core.js" type="text/javascript"></script>
  38.         <*script src="lib/js/ie7_0.8/src/ie7-css2-selectors.js" type="text/javascript"></script>
  39.         <*script src="lib/js/ie7_0.8/src/ie7-css3-selectors.js" type="text/javascript"></script>
  40.         <![endif]-->
  41.  
  42.     <!-- et un peu de style spécifique à la page, à la main... -->
  43.         <style type="text/css" media="all" xml:space="preserve">
  44.               body
  45.               {
  46.                  /* Ce qu'on veut... */
  47.               }
  48.               @import url(additionnel.css);
  49.         </style>
  50.  
  51.     <!-- Et un peu de javascript local éventuellement... -->
  52.         <*script type="text/javascript" xml:space="preserve">
  53.         //<![CDATA[
  54.         //]]>
  55.         </script>
  56.     </head>
  57.     <body>
  58.         <p>
  59.             Ce template est un point de départ pour créer une bonne page.
  60.             La lib IE7 permet de faire des choses assez extraordinaires pour IE; dans le genre des horreurs comme ça:
  61.           div+ol>li:first-child>p
  62.  
  63.            .... tout en ayant un rendu assez proche des autres butineurs.
  64.  
  65.         </p>
  66.     </body>
  67. </html>


A partir de là, les ressources de w3school sont une bonne référence.

C'est une excellente idée de valider systématiquement tes pages (perso, je me sers du validateur de l'extension web-developper de Firefox).

C'est aussi une bonne idée IMHO de ne pas trop recourir aux classes css.
C'est beaucoup plus propre avec les sélecteurs...

Est-ce que ça aide un peu?
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde