Un probleme avec chrome

Quiestlemeilleur · 23 Février 2011

Bonjour le hub,

Pour mon premier post, c'est une demande d'aide. J'ai fait un site (soyez indulgent, je suis pas spécialiste en design et c'est mon premier site dynamique en php ...).

Mon probleme sous chrome : j'utilise beaucoup sur ce site un principe de liste avec ascenceur (des div). Sous IE et FF, aucun souci mais sous chrome ca marche de façon aleatoire ...

Par exemple regardez la page home de mon site (les deux cadres a droite) en signature sous IE puis sous chrome et vous pigerez vite le pb ... j'ai essayé plein de trifouillages pour voir si chrome aimait mieux mais tout ce que j'arrive à faire, c'est a péter le truc sous IE et FF !! Donc pour le moment j'ai laissé comme ca et tant pis pour les visiteurs sous chrome ... mais bon c'est pas top.

**Ernestine** · 23 Février 2011

Bonjour,

Ce code est un véritable brouillon : mise en page en tableaux imbriqués, gros mélange de styles dans la CSS et directement dans le code html, beaucoup d'erreurs de validation, et tu ne déclares même pas le Doctype ! C'est typiquement le genre de site où dès qu'il y a le moindre problème, il est plus rapide de tout recommencer à zéro plutôt que de chercher à le résoudre.

Quiestlemeilleur · 23 Février 2011

je sais que ce n'est pas un site au top sur le plan technique (le contraire serait etonnant). Cela ne m'empeche pas de vouloir trouver une solution à un probleme localisé à chrome (le site fonctionne par ailleurs tout a fait comme je le souhaite - on aime ou on aime pas certes), et réécris tout n'est pas une solution ...

Edit : Et puis il y a 2 point de vues : celui du technicien et celui du visiteur qui lui se moque de ce qu il y a derrière et regarde ce qu'on lui propose au final (peut importe que ca soit des TD ou autres). Et coté utilisateur, le site semble plaire aux premiers inscrits (notamment sa vitesse - preuve que pureté technique et performance ne sont pas forcément liées), même si il ressemble a un brouillon pour des techniciens du web.

Modifié 23 Février 2011 par Quiestlemeilleur

**Dan** · 23 Février 2011

Bonjour,

Tu devrais au minimum mettre un définir un DOCTYPE pour ton site... qu'au moins les navigateurs sachent comment ils doivent rendre la page.

Par exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

... en définissant le type de codage html que tu utilises.

Voir cette page pour les différents doctypes possibles : http://www.w3.org/QA/2002/04/valid-dtd-list.html

Quiestlemeilleur · 23 Février 2011

Oui je vais le faire. merci Dan. Est ce que tu penses que ca peut régler mon probleme sous chrome ou cela n'a rien à voir ?

EDit : je pige pas grand chose a ces type de doctype (en anglais c'est pas mon fort). dans le cas de mon site, le plus simple est de mettre quoi ?

Modifié 23 Février 2011 par Quiestlemeilleur

**Dan** · 24 Février 2011

Je pense que le plus approprié serait

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

à mettre en toute première ligne de tes pages.

Cela peut jouer sur le rendu, donc sur celui de Chrome !

Quiestlemeilleur · 24 Février 2011

Merci Dan. Je viens de tester et le bilan est :

1 - Point positif : ca ne modifie en rien l'affichage du site

2 - Hormis une grosse pagaille au niveau des css (les lignes surlignées au survol). Ce qui est curieux c'est qu'il semble ne prendre en compte qu'une partie des consignes de la feuilled e style.

Exemple : Voila un morceau de mes css

a.lienliste12_turquoise

{

color : 666666;

text-decoration : none;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight : normal;

width : 1500px;

height : 18px;

}

a.lienliste12_turquoise:hover

{

color : 00bbbb;

background-color : ECFFFF;

}

J'ai mis en gras ce qui est pris en compte (le reste semble ignoré des que je met le doctype). Le lien est bien affiché mais ne tient pas compte des dimensions et au survol il est souligné (ce qui n'est pas demandé) et ni couleur ni gras ... Donc pour le moment pas le choix je laisse sans doctype.

**Ernestine** · 24 Février 2011

Concernant ton problème d'ascenseur, après quelques petits essais avec les outils de développement de Chrome, je pense que tu peux régler ton problème (sans que ça gêne les autres navigateurs) en précisant un alignement à gauche pour le conteneur.

Dans le code source html, remplacer :

<div style="overflow: scroll; width: 330px; height: 150px">

par :

<div style="overflow: scroll; width: 330px; height: 150px; text-align: left;">

(n'oublie pas le point virgule après height: 150px;)

Quiestlemeilleur · 24 Février 2011

Mis en place sur la page index et ca ne change rien sous chrome. Ca ne casse rien chez les autres en tout cas.

Le plus déroutant c'est que ensuite sur la page de selection, les même types de liste fonctionnent très bien sous chrome ... meme sans le align left ...

Modifié 24 Février 2011 par Quiestlemeilleur

**Ernestine** · 24 Février 2011

Tu n'as pas correctement recopié le code que j'ai indiqué. Tu as fermé la guillemet deux fois, tu as mis :

<div style="overflow: scroll; width: 330px; height: 150px"; text-align: left;">

Il faut mettre :

<div style="overflow: scroll; width: 330px; height: 150px; text-align: left;">

Quiestlemeilleur · 24 Février 2011

oups .. je vais corriger

Quiestlemeilleur · 24 Février 2011

Ca marche ! Milles merci ... :thumbsup: (je préfère cela comme solution plutôt que "ton site est pourri, réécris tout"

Ce que je comprends c'est que les navigateurs ayant des tolérances différentes ca fait que ca marchait sur 2 mais pas sur le troisème. Ce que je comprends moins c'est pourquoi sur les autres pages, sans le align, ca marche aussi sous chrome ...

Exemple avec cette page :

/>http://www.qui-est-le-meilleur.com/palmares-hotels-005.php

ou il y a des div en pagaille sans le align et ca marche impec même sous chrome ...

EDit : par sécurité je vais quand même aller ajouter le align sur toutes mes div :whistling:

Edit : Je viens d'aller corriger à d'autre endroits et c'est bien cela. Des qu'on met le align, chrome se sent mieux.

Modifié 24 Février 2011 par Quiestlemeilleur

**Ernestine** · 24 Février 2011

Exemple avec cette page :

/>http://www.qui-est-le-meilleur.com/palmares-hotels-005.php

ou il y a des div en pagaille sans le align et ca marche impec même sous chrome ...

Oui mais sur cette page, le scroll dans les divs est uniquement vertical. Alors que sur la page d'accueil, dans les divs "Dernières notations" et "Derniers commentaires", le scroll est à la fois vertical et horizontal. Ce n'est donc pas tout à fait le même cas de figure

Quiestlemeilleur · 24 Février 2011

Oui mais sur cette page, le scroll dans les divs est uniquement vertical. Alors que sur la page d'accueil, dans les divs "Dernières notations" et "Derniers commentaires", le scroll est à la fois vertical et horizontal. Ce n'est donc pas tout à fait le même cas de figure

Effectivement ... en tout cas merci, ca m'enlève une épine du pied (même si chrome c'est 5% du marché, ca m'aggacait d eme dire que des visiteurs ne pouvait pas utiliser mon site).

Quiestlemeilleur · 24 Février 2011

Ernestine, je t'ai mis un petit merci sur la page home (actu du site) ...

Quiestlemeilleur · 24 Février 2011

Oui mais sur cette page, le scroll dans les divs est uniquement vertical. Alors que sur la page d'accueil, dans les divs "Dernières notations" et "Derniers commentaires", le scroll est à la fois vertical et horizontal. Ce n'est donc pas tout à fait le même cas de figure

Par contre sur cette page :

/>http://www.qui-est-le-meilleur.com/selection.php

- scrowl horizontal

- pas de align

- et ok sous chrome ... :unsure:

**Arlette** · 24 Février 2011

/>http://www.qui-est-le-meilleur.com/selection.php

Sur cette page sous Safari j'ai ce message :

Warning: Unknown(): Your script possibly relies on a session side-effect which existed until PHP 4.2.3. Please be advised that the session extension does not consider global variables as a source of data, unless register_globals is enabled. You can disable this functionality and this warning by setting session.bug_compat_42 or session.bug_compat_warn to off, respectively. in Unknown on line 0

Je doute que cela soit normal, mais comme je ne suis pas Ernestine, je ne pourrais pas te donner un indice Sorry, je ne peux que te reporter l'incident

Quiestlemeilleur · 24 Février 2011

Sur cette page sous Safari j'ai ce message :

Je doute que cela soit normal, mais comme je ne suis pas Ernestine, je ne pourrais pas te donner un indice Sorry, je ne peux que te reporter l'incident

oui ce warning est indépendant du navigateur. C'est semble t il un pb de variables non encore déclarées et affectées à des variables sessions (le warning disparait des que les 3 colonnes sont cliquées ...). Ce petit bug (qui ne derange pas le fonctionnement) va être réglé.

Modifié 24 Février 2011 par Quiestlemeilleur

**Ernestine** · 24 Février 2011

Le problème, c'est que c'est une mise en page constituée d'une multitude de tableaux et de cellules de tableau, auxquelles sont appliqués des styles, soit avec des style="", soit directement en dur comme <table bgcolor="#ffffff" Or certains styles se répercutent de "mère en fille" d'une cellule à l'autre, si bien que pour régler un problème, ça oblige à remonter de tableau en tableau.

Ainsi sur la page d'accueil, en regardant le code plus attentivement, on constate que les deux divs "Dernières notations" et "Derniers commentaires" sont contenus dans une cellule de tableau. Et cette cellule est ouverte ainsi :

<td align="right" valign="top" width="330">

Ce algin right se répercute donc sur les divs, ce qui expliquait pourquoi, sous Chrome, le tableau contenant les dernières notations était collé sur le bord droit du div si bien que le contenu était invisble, car trop à gauche.

Sur d'autres pages, il suffit qu'il n'y ait pas ce align=right dans la cellule mère, pour que ça fonctionne.

Après la question, c'est pourquoi Chrome l'interprète de telle manière et Firefox et IE d'une autre. Là pour le coup, ça va être dur de le deviner, vue la complexité du code et le nombre de paramètres qui se répercutent les uns sur les autres. A plus forte raison du fait que tu n'as déclaré aucun Doctype, donc c'est le navigateur qui le choisit comme bon lui semble pour le meilleur et pour le pire...

Merci pour la petite mention sur la page d'accueil.

Quiestlemeilleur · 24 Février 2011

Merci ernestine pour ces explications.

Le melange des css et du dur vient du fait que au depart c etait que en dur et que progressivement je mets en css donc forcément a un moment donné, il y a des deux ...

Pour le doctype, le pb c'est que le site marche impec sans et part en vrille des que j'en met un ... donc je vais pas être intégriste et pour le moment laisser sans doctype.

Dudu · 27 Février 2011

Salut, bienvenue sur le Hub.

J'arrive un peu après la bagarre, mais je tenais à faire 2 petites remarques.

a.lienliste12_turquoise
{

color : 666666;

[...]

}

a.lienliste12_turquoise:hover

{

color : 00bbbb;

background-color : ECFFFF;

}

Pour qu'une couleur soit prise en compte, il ne faut pas oublier le # devant.

Exemple: a {color : #00bbbb;}

Pour le doctype, le pb c'est que le site marche impec sans et part en vrille des que j'en met un ... donc je vais pas être intégriste et pour le moment laisser sans doctype.

Le gros problème à dire "doctype ça marche pas donc j'en mets pas" c'est que tu bosses à l'économie. Cela a pour inconvénient que ton site ne pourra jamais réellement être pérenne et s'inscrire sur du long terme. Tu va être rapidement bloqué par des contraintes techniques et tu auras du mal à faire évoluer ton site.

Je suis assez d'accord avec l'hypothèse du "on casse tout et on recommence". Je comprends que ce n'est pas plaisant d'entendre ça. Tu n'es pas le premier (et tu ne sera pas le dernier) à qui on a dit ça sur le Hub, et personne ne l'a jamais bien pris au début. D'ailleurs on ne dit pas ça pour le plaisir d'envoyer ch paître les nouveaux venus; on a tous débuté un jour. Si on le dit, c'est qu'il y a une raison, que c'est la meilleure solution (ou bien "la pire mais à l'exception de toutes les autres" comme qui dirait). Pour l'instant, ton problème est réglé parce que tu as apposé une rustine sur ton pneu qui est usé jusqu'à la toile, mais ça ne l'empêchera pas d'exploser si tu prends l'autoroute.

(Une bonne comparaison informatique est 99 fois sur 100 liée à l'automobile )

Bon courage en tous cas, et tu sais où nous trouver

Quiestlemeilleur · 27 Février 2011

Pour le # au niveau Css je veux bien ... puisque de toute façon on exprime toujour sles couleurs avec un # mais alors pourquoi ca marche impeccablement sans le # ? hormis des que je mets un doctype.

En ce qui concerne ton image routière je n'y adhère pas ... en effet, on ne voit d'un site que le code produit (certes une accumulation de table et td) mais pas la fçon dont il est produit. Et dans le cas présent, le site est ultra facile à gérer et maintenir avec des cloisenements des fonctions, des boites noires autonomes, etc etc

Ensuite les puristes n'aiment pas les table et td ... c'est pas ce qui rendra un site inconduisible à haute vitesse.

Une illustration : Voila un joli bout de code fait de table et de td ...

<table style="margin-top:10px; background:none;">
<tr>
<td style="width:65%; border:1px solid #a7d7f9; vertical-align:top; color:#000; padding: 0px 10px 10px 0px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;">
<table cellpadding="2" cellspacing="5" style="width:100%; vertical-align:top; background:transparent;">
<tr>
<td>

Il ne tiendra pas la route a haute vitesse ? Heu sauf que c'est ... wikipédia :whistling:

Note : cela ne va pas m'empecher de tester si avec les # dans les css mon doctype ne passera pas ... si c'est le cas cela accréditera mon idée de ne pas jeter le bébé avec l'eau du bain ... (toujours plus facile quand c'est le bébé d'un autre ...)

Modifié 27 Février 2011 par Quiestlemeilleur

Dudu · 27 Février 2011

Ne te braque pas

1.

Pourquoi ça marche très bien sauf si on met un Doctype ?

Simple : ça s'appelle la bascule du mode de compatibilité. En gros, chaque navigateur a deux modes de rendu : un mode "dégradé" et un mode "conforme".

Lorsque le navigateur décode une page sans Doctype (ou avec un Doctype très ancien) il se met en mode degradé, c'est-à-dire qu'il va avoir une gestion des erreurs beaucoup plus laxiste et, en un mot comme en dix-mille, il va tenter de se dépatouiller avec ça.

Lorsque le même navigateur rencontre une page avec un Doctype, cela signifie pour lui que l'auteur de cette page sait ce qu'il fait, il passe donc en mode "conforme" et il ne corrige plus rien.

(En vrai, c'est un chouïa plus complexe mais je schématise)

Se dire "bon ben très bien, je vais coder à l'arrache, c'est le navigateur qui va me corriger" ça ne marche qu'un temps, et on se retrouve vite débordé.

2.

Les puristes n'aiment pas les table et les td.

Euh... Ses propos n'engagent que toi ! La balise <table> et toutes les balises qui vont bien avec (<caption>, <tbody>, <td>, <tr>, etc.) sont des balises très utiles pour ordonner des données tabulaires.

Alors très bien mais qu'est-ce qu'une donnée tabulaire vas-tu me dire. Une donnée tabulaire, ça peut être n'importe quoi, à partir du moment où toi tu as décidé de la présenter sous forme de tableau parce que c'est plus simple / ou plus joli visuellement / ou plus compréhensible / ou que sais-je...

Ainsi, je peux dire :

Pierre a reçu 5 euros de la part de sa mère, tandis que Paul en reçu 2 de la part de son père. Ce faisant Jacques gagnait 4 euros à la sueur de son front, pendant qu'André trouvait un billet de 50 par terre.

Ou alors :

Pierre  |  5 | Don / Mère
Paul    |  2 | Don / Père
Jacques |  4 | Gain
André   | 50 | Chance

Tout dépend de ce que tu souhaites mettre dans un tableau. Mais si tu veux faire un tableau, alors fais un tableau. Et pour ce faire, <table>, <td> et leurs camarades seront les meilleures balises.

3.

Fragment de code de Wikipedia.

Ce bout de code m'a l'air pas trop mauvais et tiendra certainement la route à grande vitesse.

Peux-tu me dire où et quand j'ai dit qu'un tableau (puisque tu me présentes un code d'un tableau) ne tiendrait pas la route ? Je n'ai pas écrit le mot "tableau" ou un de ses synonymes dans mon précédent message, je n'y ai pas même évoqué l'utilisation de la balise <table>, même de manière sous-entendue

Tu peux aussi rechercher dans mes anciens messages sur le Hub si le coeur t'en dit, tu ne me verras jamais dire ça. Faire du tableau imbriqué dans le seul but de faire de la mise en page (et donc pas de présenter des données tabulaires) n'est pas ce qu'il y a de plus conseillé certes, et notamment en termes d'accessibilité (ce qui n'est pas le but du sujet qui nous intéresse aujourd'hui) mais de nombreux sites le font et fonctionnent de manière pérenne.

Ce que j'ai dit en l'occurence, c'était par rapport à la présence d'un Doctype. Vouloir corriger des problèmes d'affichages ponctuels (dans la cas présent, des <div>s scrollables qui posaient problème à Chrome -et donc à Safari aussi puisque ces deux navigateurs utilisent le même moteur de rendu) alors qu'il n'y a aucun Doctype sur la (les) page(s), c'est appliquer une rustine sur un pneu usé : ça aide à atteindre la prochaine station mais tu ne courras pas de rallye.

Ensuite, me dire en substance "attention garçon, c'est Wikipedia donc c'est du solide", bof.

En l'occurence, Wikipedia a un code assez bien foutu dans l'ensemble. Mais l'argument du "gros site donc forcément code optimisé" est faux, et l'exemple est particulièrement célèbre : google.com

C'est un cas d'école ! Doctype invalide, pas de guillemets autour des valeurs des attributs, 30 erreurs par ligne, j'en passe et des meilleures. Mais bon eux, ils s'en foutent, ils ont le nombre d'ingénieurs qu'ils veulent et c'est pareil pour la bande passante. Donc forcément...

4.

C'est toujours plus facile quand c'est le bébé de quelqu'un d'autre.

Si seulement tu savais le nombre de fois où j'ai eu des sites à reprendre (ancien webmaster disparu dans la nature, par ex.) et où j'ai tout refait en partant de la page blanche

Non pas que ça me démangeait de m'emm..bêter à tout refaire de zéro, crois-moi. Mais si c'est meilleur sur le long terme, alors c'est la meilleure solution. Ce n'est pas la plus attractive ou la moins fatigante, mais c'est ce qu'il y a de mieux à faire.

Enfin bref, voilà mon conseil. S'il ne t'intéresse pas, et bien ne l'applique pas, tout simplement

Bon courage pour la suite.

Connexion

Un probleme avec chrome

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter