Discussion :

[yafoto]

Hello,

1) Voilà ce qu'il se passe sous XP, FF3.6.3 ou 3.6.6 (chaud devant!):
- lorsque j'affiche la page sans activer l'API ma mise en page est centree comme je souhaite (avec une div vide pour la carte evidemment). La syntaxe passe HTML Tidy sans erreur W3C.
- lorsque j'active l'API (en definissant simplement initGeoportalMap, c'est la seule difference entre les 2 cas), mon panel inferieur se decale a gauche et n'est plus centré (avant que les tuiles ne soient entierement chargees, on peut meme voir ce panel centré correctement avant qu'il ne se decale des que le chargement est termine ).

2) Autre souci, sous IE7 ou IE8, la partie information (echelle, choix de projection etc) est tronquée sur l'affichage des coordonnees alors que sous FF tout va bien de ce côté là...

3) Sous FF, j'ai une 10ne d'erreurs sur les chargements proj4js entre autres:

Erreur*: erreur de syntaxe
Fichier Source*: http://www.baznat.net/js/EXT_geoport...=1277759217724
Ligne*: 1, Colonne*: 1
Code Source*:
Proj4js.defs["IGNF:GEOPORTALFXX"]="+title=Geoportail - France metropolitaine +proj=eqc +nadgrids=null +towgs84=0.0000,0.0000,0.0000 +a=6378137.0000 +rf=298.2572221010000 +lat_0=0.000000000 +lon_0=0.000000000 +lat_ts=46.500000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs";

et sur des problemes de style:

Avertissement*: Erreur d'analyse de la valeur pour «*filter*». Déclaration abandonnée.
Fichier Source*: http://www.baznat.net/js/EXT_geoport...ault/style.css
Ligne*: 234

rien de tout ca sous IE

4) J'ai essayé de fonctionner sans includeEngine=false (et donc sans inclure geoportal.js) et IE refuse de demarrer avec:

Line: 111
Character: 361991
Code: 0
Error Message: Accès refusé.

URL: http://api.ign.fr/geoportail/api/js/1.0/Geoportal.js

La page ko sous FF est ici, la page sans appel a l'API, ici.

J'apprecierais votre aide sur cet epineux probleme qui me depasse ...

[mga_geo]

J'ai un peu de mal à lire le code HTML, avec Tidy il doit être possible de le remettre en forme avec des sauts de ligne, indentation...

J'essaierai d'inclure "<table id='coord_carte'> ..." dans une div

[m_robert]

Bonjour,

le problème vient du fait que l'on utilise une table dans une div.
Deux solutions sont possibles :

• ajouter un margin:auto sur la table.
• mettre la table dans une <div align='center'> (solution moins élégante)

La page contenant est modifs est ici

Autre remarque dans ton url d'appel à l'api, ton paramètre version est erroné : tu indiques api?v-e=1.0 au lieu de api?v=1.0-e.

[yafoto]

merci de vous pencher sur mon probleme.

mpa_geo: j'ai essayé coord_carte dans une div, ca ne change rien.

m_robert: effectivement le margin:auto corrige bien le probleme mais il y a deja un text-align:center dans conteneur_carte + un margin: 10px auto 0 auto; sur toutes les tables! Ca devrait amplement suffire et du reste, c'est suffisant puisque, sans l'API, c'est centré... Donc ok pour le remède mais sur le symptôme ... Il semble bien que certains styles de l'API aient une influence au-delà de leurs conteneurs, gênant...

Bien vu pour la version extended , il serait peut-etre bon de clarifier la doc:

Le paramètre v peut être suivi de la chaîne "-m" pour obtenir l'API minimum.
Le paramètre v peut être suivi de la chaîne "-e" pour obtenir l'API étendue.

Avec ce changement, je n'ai plus toutes ces erreurs proj4js (cf ici), reste juste les erreurs de style (une suggestion peut-etre: déplacer les declarations en erreur à la fin de chaque definition de style comme ca la majorite du style est quand meme defini...).

Et sous IE il y a toujours la troncature sur les coordonnees ...

[dgrichard]

m_robert: effectivement le margin:auto corrige bien le probleme mais il y a deja un text-align:center dans conteneur_carte + un margin: 10px auto 0 auto; sur toutes les tables! Ca devrait amplement suffire et du reste, c'est suffisant puisque, sans l'API, c'est centré... Donc ok pour le remède mais sur le symptôme ... Il semble bien que certains styles de l'API aient une influence au-delà de leurs conteneurs, gênant...

Certes, mais cela est du au fait qu'OpenLayers a besoin de certains styles pour fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.gpMap {
  position:relative;
  overflow:hidden;
  background-color:#EEEEEE;
  text-align:left !important;/* prevent OL Feature to be badly displayed */
  width:100%;
  height:100%;
  cursor:crosshair !important;
}

Ta page définit ses styles, puis charge l'API ... qui charge ses styles après les tiens !

Pour prévenir cela, il faut charger les styles de l'API à la main.

Bien vu pour la version extended , il serait peut-etre bon de clarifier la doc:

Ok, on va le faire - merci

Avec ce changement, je n'ai plus toutes ces erreurs proj4js (cf ici), reste juste les erreurs de style (une suggestion peut-etre: déplacer les declarations en erreur à la fin de chaque definition de style comme ca la majorite du style est quand meme defini...).

Je n'ai aucune erreur sous FF 3.5 ... FF 3.6.3 est pourri, j'ai pas encore testé avec FF 3.6.6 (mais, je sais que des pages qui ne fonctionnaient pas avec FF 3.6.3 fonctionnent avec FF 3.6.6) - pour moi, c'est un problème du butineur/OS (la preuve tout fonctionne sous FF sous Linux

EDIT:
Si tu peux donner la liste, on peut faire ces déplacements ...

Et sous IE il y a toujours la troncature sur les coordonnees ...

Faudrait essayer de réduire la taille des caractères pour voir (classe gpLong, gpLat) ?

[yafoto]

Certes, mais cela est du au fait qu'OpenLayers a besoin de certains styles pour fonctionner

Pour commencer, merci de ton retour, toujours aussi appreciable.
Bien sur qu'OL doit definir ses propres styles, rien a redire! Mais en l'occurence, les miens ne derivent pas de .gpMap ou autres, ils ne devraient pas se marcher dessus. Sauf si OL definit aussi des styles sur des elements html standards, enfin c'est la seule explication qui me vienne comme ca, mais ce serait etonnant.

Pour prévenir cela, il faut charger les styles de l'API à la main.

Si je te suis, ca veut dire charger les styles de l'api puis charger l'api sans style (c'est possible ca ?) puis mes styles ? Ca devient compliqué non ?

pour moi, c'est un problème du butineur/OS

En partie. En fait la plupart des erreurs de style viennent de balises qui sont specifiques IE (filter, expression). Donc, ca peut aller (je n'ai pas tout eplucher): FF ne les comprends pas mais continue quand meme en sequence (je pensais que ca bloquait le reste de la definition mais, apres test, il semble que non).

Faudrait essayer de réduire la taille des caractères

En fait c'est un probleme de refresh. Si on change manuellement le systeme de coordonnees avec le combo apres chargement, ca se redessine mieux. J'ai essayé de lancer un redraw ou un updateSize sur le Geoportal.Control.Information mais ca ne fait rien. Une idee ?

[dgrichard]

Bien sur qu'OL doit definir ses propres styles, rien a redire! Mais en l'occurence, les miens ne derivent pas de .gpMap ou autres, ils ne devraient pas se marcher dessus. Sauf si OL definit aussi des styles sur des elements html standards, enfin c'est la seule explication qui me vienne comme ca, mais ce serait etonnant.

OpenLayers ne définit que des styles locaux. Geoportal définit uniquement ces styles globaux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
a, div, img, table, span {
  margin:0px;
  border:0px;
  padding:0px;
}

Donc, rien qui casse une mise en page ...

Mais ici tu n'es pas sur un cas «d'héritage», seulement de centrage d'un tableau dans une div (soluce de m_robert).

Si je te suis, ca veut dire charger les styles de l'api puis charger l'api sans style (c'est possible ca ?) puis mes styles ? Ca devient compliqué non ?

Oh que non, voir cet exemple !

En partie. En fait la plupart des erreurs de style viennent de balises qui sont specifiques IE (filter, expression). Donc, ca peut aller (je n'ai pas tout eplucher): FF ne les comprends pas mais continue quand meme en sequence (je pensais que ca bloquait le reste de la definition mais, apres test, il semble que non).

C'est comme sous Opera ... des centaines d'erreurs de styles car ils refusent non seulement les styles IE, mais aussi les styles -moz

En fait c'est un probleme de refresh. Si on change manuellement le systeme de coordonnees avec le combo apres chargement, ca se redessine mieux. J'ai essayé de lancer un redraw ou un updateSize sur le Geoportal.Control.Information mais ca ne fait rien. Une idee ?

l'updateSize() ne fera rien si la taille de change pas ...
le redraw() est appelé par updateSize() si la taille change
Sinon, j'ai pas d'idée a priori pour IE ...

[yafoto]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
a, div, img, table, span {
  margin:0px;
  border:0px;
  padding:0px;
}

Donc, rien qui casse une mise en page ...
Mais ici tu n'es pas sur un cas «d'héritage», seulement de centrage d'un tableau dans une div

euh, mouais, heritage au sens classe css si tu veux, mais mes elements a, div, table, span heritent bien du comportement defini par GP. C'est bien mon bug: j'ai un css qui definit mes tables avec une margin auto et puis les css GP se chargent apres mes definitions (tu peux confirmer sinon je ne vois pas le probleme) et les remplacent par les siennes...

La seule façon de contrer la chose, c'est d'avoir des definitions plus prioritaires que celles de GP (cf m_robert). Donc soit directement dans le html avec les proprietes style, soit avec des identifiants ou des classes (par ex .toto a), ce qui peut devenir lourd. Et dans ce dernier cas, ce devrait alors etre ces identifiants/classes qui prennent le pas sur les definitions GP qui risquent de ne pas apprécier...

Question naive: ce ne serait pas mieux d'isoler ces 5 elements pour qu'ils n'interferent pas avec les definitions de l'utilisateur ?

[m_robert]

C'est bien mon bug: j'ai un css qui definit mes tables avec une margin auto et puis les css GP se chargent apres mes definitions (tu peux confirmer sinon je ne vois pas le probleme) et les remplacent par les siennes...

Pour charger les css GP avant celles du projet, il faut les charger 'à la main' comme le montre l'exemple Changement de l'affichage

Après le chargement des scripts, il faut charger les css OL et GP:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!-- import OpenLayers/Geoportal CSS to ease overloading their styles : -->
    <!-- OpenLayers :-->
    <link id="__OpenLayersCss__" href="/geoportail/api/js/1.0/theme/default/style.css" type="text/css" rel="stylesheet"/>
    <!--[if lte IE 6]>
    <link id="__IE6OpenLayersCss__" href="/geoportail/api/js/1.0/theme/default/ie6-style.css" type="text/css" rel="stylesheet"/>
    <![endif]-->
    <!-- Geoportal :-->
    <link id="__GeoportalCss__" href="/geoportail/api/js/1.0/theme/geoportal/style.css" type="text/css" rel="stylesheet"/>

puis tes propres css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel='stylesheet' type='text/css' href='style/baznat.css'/>
<link rel='stylesheet' type='text/css' href='style/pub_choix_lieu.css'/>

Tes styles surchargent alors bien ceux de l'api : exemple
Il s'agit ensuite de faire des classes pour ne pas tous les écraser.

[yafoto]

Interessant, merci m_robert. Donc quand les css OL/GP sont inclus explicitement, l'api le detecte et ne va pas les recuperer au moment de son chargement (c'est a dire apres le chargement de la page et de tous les styles), c'est ca ? Ca peut effectivement resoudre le probleme dans ce cas.

[m_robert]

Donc quand les css OL/GP sont inclus explicitement, l'api le detecte et ne va pas les recuperer au moment de son chargement (c'est a dire apres le chargement de la page et de tous les styles), c'est ca ?

C'est çà. L'api teste la présence des css (ce sont les identifiants des <link> qui sont repérés). S'ils sont inclus explicitement, elle ne les recharge pas.

[yafoto]

ok. Je l'indique comme resolu meme si je continue de penser que mettre des contraintes de styles sur des elements html n'est pas tres userfriendly .
Merci de m'avoir repondu!

[dgrichard]

ok. Je l'indique comme resolu meme si je continue de penser que mettre des contraintes de styles sur des elements html n'est pas tres userfriendly .
Merci de m'avoir repondu!

Comme indiqué les seules contraintes sont :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
a, div, img, table, span {
  margin:0px;
  border:0px;
  padding:0px;
}

qui sont en général utilisées pour que tous les butineurs partent avec les mêmes boîtes à 0 !

Tu généralises à ton problème qui se résout tout seul via le bon ordre d'inclusion des CSS : rien que de très logique à nouveau ... et rien de user unfriendly