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.
Un probleme avec chrome
Mauvaise gestion de div scrolables
Noter :
#1
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 23 février 2011 - 15:42
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
Haut
#2
- Groupe : Fondatrice
- Messages : 1 034
- Inscrit(e) : 21-août 03
- Genre:Femme
Posté 23 février 2011 - 17:23
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.
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.
#3
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 23 février 2011 - 18:39
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.
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.
Ce message a été modifié par Quiestlemeilleur - 23 février 2011 - 18:59.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#4
- Webmaster
-
- Groupe : Direction
- Messages : 22 946
- Inscrit(e) : 18-août 03
- Genre:Homme
- Localisation:St Anne, Alderney
- Société:Webmaster Hub Ltd.
Posté 23 février 2011 - 19:28
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 :
Voir cette page pour les différents doctypes possibles : http://www.w3.org/QA...d-dtd-list.html
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...d-dtd-list.html
La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH
#5
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 23 février 2011 - 19:33
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 ?
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 ?
Ce message a été modifié par Quiestlemeilleur - 23 février 2011 - 19:35.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#6
- Webmaster
-
- Groupe : Direction
- Messages : 22 946
- Inscrit(e) : 18-août 03
- Genre:Homme
- Localisation:St Anne, Alderney
- Société:Webmaster Hub Ltd.
Posté 24 février 2011 - 08:22
Je pense que le plus approprié serait
Cela peut jouer sur le rendu, donc sur celui de Chrome !
<!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 !
La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH
#7
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 09:26
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.
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.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#8
- Groupe : Fondatrice
- Messages : 1 034
- Inscrit(e) : 21-août 03
- Genre:Femme
Posté 24 février 2011 - 11:06
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 :
par :
(n'oublie pas le point virgule après height: 150px;)
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;)
#9
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 12:15
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 ...
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 ...
Ce message a été modifié par Quiestlemeilleur - 24 février 2011 - 12:18.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#10
- Groupe : Fondatrice
- Messages : 1 034
- Inscrit(e) : 21-août 03
- Genre:Femme
Posté 24 février 2011 - 12:18
Tu n'as pas correctement recopié le code que j'ai indiqué. Tu as fermé la guillemet deux fois, tu as mis :
Il faut mettre :
<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;">
#11
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 12:22
oups .. je vais corriger
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#12
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 12:27
Ca marche ! Milles merci ... 
(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-l...-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
Edit : Je viens d'aller corriger à d'autre endroits et c'est bien cela. Des qu'on met le align, chrome se sent mieux.
(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-l...-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
Edit : Je viens d'aller corriger à d'autre endroits et c'est bien cela. Des qu'on met le align, chrome se sent mieux.
Ce message a été modifié par Quiestlemeilleur - 24 février 2011 - 12:36.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#13
- Groupe : Fondatrice
- Messages : 1 034
- Inscrit(e) : 21-août 03
- Genre:Femme
Posté 24 février 2011 - 12:37
Quiestlemeilleur, le 24 février 2011 - 12:27, dit :
Exemple avec cette page :
http://www.qui-est-l...-hotels-005.php
ou il y a des div en pagaille sans le align et ca marche impec même sous chrome ...
http://www.qui-est-l...-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
#14
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 12:41
Ernestine, le 24 février 2011 - 12:37, dit :
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).
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#15
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 13:04
Ernestine, je t'ai mis un petit merci sur la page home (actu du site) ...
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#16
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 13:13
Ernestine, le 24 février 2011 - 12:37, dit :
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-l...m/selection.php
- scrowl horizontal
- pas de align
- et ok sous chrome ...
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#17
- Groupe : Direction
- Messages : 9 282
- Inscrit(e) : 26-août 03
- Genre:Femme
- Localisation:Rognes
Posté 24 février 2011 - 13:40
Quiestlemeilleur, le 24 février 2011 - 13:13, dit :
Sur cette page sous Safari j'ai ce message :
Citation
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
#18
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 13:51
Arlette, le 24 février 2011 - 13:40, dit :
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
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é.
Ce message a été modifié par Quiestlemeilleur - 24 février 2011 - 13:52.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
#19
- Groupe : Fondatrice
- Messages : 1 034
- Inscrit(e) : 21-août 03
- Genre:Femme
Posté 24 février 2011 - 14:35
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 :
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.
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.
#20
- Groupe : Actif
- Messages : 15
- Inscrit(e) : 23-février 11
- Genre:Homme
Posté 24 février 2011 - 16:01
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.
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.
Qui-est-le-meilleur.com : tout noter ... ou presque ! (Commerçants, fournisseurs, administrations, lycées, hopitaux, médecins, villes, sites touristiques, ... et personnalités politiques !)
