Tom's Guide > Forum > Programmation > XHTML CSS [...]

XHTML CSS [...]

Forum Programmation : XHTML CSS [...]

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
sharnalk   09-08-2005 à 23:06:51

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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
NavidV3   10-08-2005 à 00:22:37
- 0 +

je peux t'aider si tu veux ;-)

Répondre à NavidV3
Bronzebeard   10-08-2005 à 10:37:02
- 0 +

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

Répondre à Bronzebeard
Badge Programmation Bronze SiM07   10-08-2005 à 11:47:37
- 0 +

Si tu end ton site compatible W3C l'affichage devrait etre bon sur les 2 navigateurs

Répondre à SiM07
Panda@IDN   10-08-2005 à 16:33:28
- 0 +

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:

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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  10. <!-- on démarre, en précisant une langue... -->
  11. <html xmlns="http://www.w3.org/1999/xhtml" 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="" />
  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" />
  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" />
  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... -->
  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]-->
  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>
  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
  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?

Répondre à Panda@IDN
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > XHTML CSS [...]
Aller à :

Il y a 2274 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 3,375 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens