Aller au contenu

Un probleme avec chrome

Quiestlemeilleur

Par Quiestlemeilleur
dans (X)HTML et CSS

 Partager

Sujets conseillés

Quiestlemeilleur

Quiestlemeilleur

Posté
Posté

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

Ernestine

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Dan

Dan

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Dan

Dan

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté

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

Ernestine

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Ernestine

Ernestine

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Ernestine

Ernestine

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté

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

Arlette

Posté
Posté

/>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

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Ernestine

Ernestine

Posté
Posté

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

Quiestlemeilleur

Posté
  • Auteur
Posté

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

Dudu

Posté
Posté

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 :D)

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

Quiestlemeilleur

Quiestlemeilleur

Posté
  • Auteur
Posté (modifié)

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é par Quiestlemeilleur
Dudu

Dudu

Posté
Posté

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 q_smallexcla.gifq_smallexcla.gif

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 rolleyes.gif

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.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...