Pb de CSS sur les listes avec Internet Explorer Mobile

Bonjour,

Je suis en train de développer une version de notre site pour mobile (en alpha : http://mobile.lavf.com) et si vous y allez avec votre mobile, vous allez voir que c'est constitué de <ul> et de <li>

Le problème, c'est que malgrès tous mes essais (list-style:none, padding:0, margin:0) sur les balises ul et li, et bien je me retrouve toujours avec le début des listes décalées d'une vingtaine de pixels du bord gauche !

Rien n'y fait !
Ca m'embête un peu de changer le template et d'en faire une spécifique aux smartphones, car c'est le même que pour la version iPhone, ce qui m'a fait gagner beaucoup de temps au développement.

Si vous avez une idée, ce serait très gentil de votre part

Salut,

Tu parles des smatphones, mais c'est quel navigateur? Opera, IE? la plupart des utilisateurs de windows mobile se dépêche d'installer Opera.

Sinon, au point de vue html, il y a un div enfant direct d'un <ul>, alors qu'un <ul> ne peut contenir que des <li>. Je le mettrais en dehors de l'<ul>.

Il n'y a pas de h1, je ferais come ça...

    <div class="toolbar fixed">
    	<h1><a href="/mobile/" target="_self"><img src="/modules/iphone/img/header_logo.png"></a><h1>
    </div>  

...et encore moins de h2 (pour les groupes).

Si tu n'as pas envie de mettre des h2, encapsule au moins les listes. AMHA, le mieux c'est d'encapsuler et de mettre les h2. Genre :

<ul>
    <li><h2>Les marchés<h2>
        <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
        </ul>
    </li>
    <li><h2>Actualités et conseils<h2>
        <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
        </ul>
    </li>
</ul>

Pour le formulaire de recherche, il n'y a pas de label.

Oui je sais ça ne répond pas directement à ta question, mais peut-être qu'en corrigeant l'html, ça se passera mieux. Sinon tant pis, tant que la mise en page se dégrade correctement...

Et je mettrais un media="all" sur le link vers la css...

Alors, pour le navigateur c'est IE mobile.

Regardez, j'ai viré tout ce qui était div imbriqués et ajouté un media=all dans l'appel du css et ça change rien

J'ai toujours mon décâlage !

ET quand la page s'affiche, je vois au début les points par défaut que IE met pour les listes (donc les marges sont normales) et en fait, quand il charge la feuille de style, il ne retaille pas la marge et laisse cet affreux espace...

Alors, après moulte tests... et bien je mets tout en div et plus en <li> et puis voilà...

C'est reparti pour 2h de taf !!

Merci quand même messieurs-dames !

a écrit :
C'est reparti pour 2h de taf !!

Vivement le contenu unique, hein ?

A ce propos, pourquoi développer tant de sites parallèles (3 si j'ai bien compté...) et ne pas s'en tenir à des media queries pour gérer les affichages selon les UA ? Ça me paraît lourd à gérer comme démarche, non ? Ya t'il une raison particulière ?

Oui, tu as bien raison Arsene et vivement que tous les principes de navigation soient iPhone-like !

Sinon, je n'ai pas développé 3 sites en parallèles . Je m'appuies sur un FrameWork maison et ce ne sont en fait que des modules, donc je change la présentation des infos et c'est bon.

Pour les media queries, je suis d'accord avec toi pour un blog ou on va dire un site 'aseez simple', mais quand tu utilises de l'ajax, js, applets java... Il va falloir s'accrocher pour que ton site soit compatible

En tout cas, la galère des developpeurs ne va pas s'arrêter là, alors que l'on commence seulement à voir IE6 s'effacer petit à petit dans les stats de visiteurs, on va être confronté au même problème sur mobile avec la non uniformisation des navigateurs...
On a encore un bel avenir devant nous

a écrit :
vivement que tous les principes de navigation soient iPhone-like

Alors là je te laisse assumer ça lol Disons que je ne partage pas ton enthousiasme...

a écrit :
quand tu utilises de l'ajax, js, applets java... Il va falloir s'accrocher pour que ton site soit compatible

Je ne suis pas certain que la frontière que tu sembles dessiner entre "petits sites" et "grosses machines" passe par les technologies utilisées ou le volume global de données à restituer. Je crois qu'elle passe plutôt au niveau de l'utilisation du site : est-il conçu au départ (en terme de marketing) pour être utilisable sur mobiles ou pas ?

"Utilisable" et "consultable", c'est pas tout à fait la même chose. A priori "consultable" concerne la dégradation élégante (CSS y pourvoit plus ou moins bien) mais "utilisable" relève de la conception même des outils. C'est à ce stade que le web mobile à sa raison d'être, et pas dans les trucs & astuces a posteriori pour le rendre consultable.

On rejoint la démarche d'accessibilité qui ne se règle pas ultérieurement, une fois le site fini, mais au départ du projet et tout au long du process de production.

Donc dire "quand tu utilises de l'ajax, js, applets java... Il va falloir s'accrocher pour que ton site soit compatible" c'est un peu comme dire "quand tu utilises de l'ajax, js, applets java... Il va falloir s'accrocher pour que ton site soit accessible", ça dénote un certain défaut de conception initial effectivement très dur à rattraper après coup.

De même qu'il existe des technologies et méthodes permettant d'accessibiliser des contenus web, il devrait exister des technologies et méthodes permettant de les rendre interopérables sur mobiles (entre autres). Le "il devrait" signifie qu'il y a du travail à mener là-dessus, mais pas dans une optique spécifiquement mobile-compliant puisqu'on ne sait pas quels outils les fabricants vont nous proposer dans quelques années.

<mode SF>Je pense par exemple à des échanges UA-serveur (de type Ajax ou autre) au moment de la négociation de contenus qui permettrait de n'envoyer que certaines données et pas d'autres, et sous des formes différentes. Du coup on a bien un site unique mais des contenus web différents selon les UA... que ce soit aujourd'hui un mobile et demain un carré de tissu numérique n'a en fait pas beaucoup d'importance, il suffit de connaître leurs "limites d'utilisabilité" pour leur envoyer ceci ou pas cela. Du coup les problèmes de maintenance sont réduits au minimum.</mode>

<mode SL>Un exemple : je suis en train de développer un module qui permet à partir d'un mobile d'envoyer un texte à un outil PHP qui génère sur le serveur deux "objets" à la requête : un pour alimenter un <div> sur le web et l'autre pour alimenter une prim dans SL. Il y a donc sur le serveur un seul "contenu texte" mais qui est envoyé sous deux formes possibles, car pour deux outils distincts. Quand dans quelques mois SL sera dispo sur mobiles, je pourrai modifier de l'information en direct (avec visualisation immédiate sur le mobile) à la fois sur SL et sur le site web
J'aurais pu aussi créer un outil pour le web et un autre pour SL mais c'est deux fois plus de boulot pour mettre une annonce en ligne sur les deux supports... et idem pour les mobiles. Je me retrouverais alors avec des tas de procédures pour aligner les contenus, alors qu'en anticipant/filtrant les usages et utilisabilités on est beaucoup plus efficace.</mode>

a+

a écrit :
Alors là je te laisse assumer ça lol smile Disons que je ne partage pas ton enthousiasme...

=> Plus qu'assumer, je le prône !! D'ailleurs essaye de développer un site avec IUI et tu verras les possibilités de l'iPhone pour ne parler que de lui.
On est de très loin en avance sur ce qu'il se fait actuellement.

=> J'assume également le fait de souhaiter plus que tout et tous les matins au réveil la mort de IE6 !! Je ne sais pas si tu es un developpeur pro, mais le W3C compliant est vraiment vital, aussi bien pour un site desktop que mobile.
Car justement, il ne suffira que de spécifier des layouts spécialisés en fonction du navigateur et ton site est porté sur un nouveau support.

a écrit :
Je crois qu'elle passe plutôt au niveau de l'utilisation du site : est-il conçu au départ (en terme de marketing) pour être utilisable sur mobiles ou pas ?

Le site que nous avons fait n'a pas du tout était conçu pour les mobiles... L'adapation iPhone et smartPhone que nous mettons en place est uniquement faite pour surfer sur la vague marketing et conséquence indirecte, participer à la vie et l'évolution des produits mobiles qui deviendront dans 2 ans une demande du grand public.

L'utilisation mobile est pour le moment un luxe (prix des connexions et des devices qui permettent de surfer correctement), mais une fois les forfaits datas illimités accessibles à tout le monde, le grand public pourra sans doute se passer du PC de bureau et n'utiliser que le support mobile.

Quoiqu'il en soit et pour en revenir à nos moutons, je crois que tu as mal interpreté la description de mon framework. Ce que j'ai fait n'a en aucun cas demandé de développer un site pour chaque version. J'utilise bien un modèle de données commun (les mêmes classes, mêmes fonctions, mêmes sources de donnée...), j'ai juste créé un template 'mobile' et un template 'iphone', avec une feuille de style spécifique à chacun. Si ce n'est pas de "l'efficacité", je ne te suis plus !
De plus on se rapproche fortement de ta description non ?

Pour finir, et ce sera mon dernier mot ( ), j'espère que tu as compris mon point de vue Arsene, car au final nous avons exactement le même et même si mon projet n'a pas été conçu à la base pour être 'portable', il se révèle l'être finalement très facilement.
Je suis juste fatigué de voir qu'encore aujourd'hui des produits grand public se bananent complètement des standards (µsoft par ex ?)

@+

Oui oui 100% d'accord avec tout (sauf p-ê iPhone sur le choix de ne pas avoir implémenté handheld, mais c'est un autre débat)