[RESOLU à 75%] site web sur blackberry

[Bishop_metz]

Salut tout le monde,

 

alors j'ai un souci avec la programmation de site web devant etre visionner sur blackberry.

 

j'ai un menu tout bete consitué d'image servant de bouton vers différentes pages, ce menu est codé pour ne constituer qu'une seule ligne et avoir une longeur totale de 320 soit la taille de l'écran d'un blackberry.

 

Quand j'accède au site depuis un pc, le menu est tout à fait normal, 320 de long et tient sur une seule ligne.

Sur le blackberry, le menu varie selon le temps que va mettre le blackberry pour charger la page

Si le chargement est rapide, tout est correct.

Si le chargement est un peu long, il me colle des espaces entre chaque image et du coup me met le menu sur 2 lignes.

 

Le problème c'est que ce n'est pas forcément un problème de cache vu que la même page peut avoir le menu affiché des 2 manières et ça que le cache soit vidé ou non, ça à l'air tout à fait aléatoire.

 

la portion de code qui concerne le menu

<table width="320" border="1" bordercolor="#0000cd" cellpadding="0" cellspacing="0">
<tr><td width="100%">

<table width="100%" border="0" bordercolor="#0000cd" bgcolor="#BDBDBD" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE_1.gif" border="0"></a></td>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE_2.gif" border="0"></a></td>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE_3.gif" border="0"></a></td>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE_4.gif" border="0"></a></td>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE-5.gif" border="0"></a></td>
<td><a href="http://www.xxx"><img src="http://WWW.xxx/img/BARRE_6.gif" border="0"></a></td>
<td align="Right"><a href="http://www.xxx"><img src="http://WWW.xxx/img/logo_100x33.JPG" border="0"></a></td>
</tr>
</table>

 

autre bizarrerie un truc plutot bete comme une zone de texte de taille 5 caractères prend sur le blackberry l'équivalent d'une zone configurée avec une bonne quinzaine de caractères

 

Quelqu'un aurait déjà fait du web pour blackberry et aurait déjà rencontrer ce genre de souci ?

Quelqu'un aurait une suggestion pour que ce que j'ai à l'écran sur le pc soit ce que j'ai sur le blackberry ?

 

le blackberry est censé interpréter correctement le html et j'aurais pensé qu'en faisant un site aux dimensions de l'écran du blackberry, il serait lisible correctement.

 

P.S.: je souligne que je ne suis pas très doué en prog web, j'ai juste quelques bases.

Modifié le 20 décembre 2006 par Bishop_metz

[KewlCat]

Essaie peut-être de limiter au maximum la liberté d'interprétation du BlackBerry en précisant explicitement pour chacun de tes éléments la hauteur et la largeur, en pixels... sait-on jamais ?

[Dylav]

Je ne m'y connais pas particulièrement en PDA, mais une chose est certaine, ton code HTML, même s'il est formellement correct, détourne l'utilisation des tables (j'aperçois même, dans ton source, une table dans une table) comme ersatz de mise en forme.

 

Rien ne t'empêche de faire simple. Je te suggère l'efficace empilement de blocs images flottants s'adossant à gauche les uns sur les autres :

 

<style type="text/css">
#menimage {float:left;border:0}
</style>
...
<a href="http://forum.zebulon.fr">
 <img id="menimage" src="Image1.jpg" alt="Image1" title="Image1">
</a>
<a href="http://forum.zebulon.fr">
 <img id="menimage" src="Image2.jpg" alt="Image2" title="Image2">
</a>
<a href="http://forum.zebulon.fr">
 <img id="menimage" src="Image3.jpg" alt="Image3" title="Image3">
</a>
...

 

Il n'en reste pas moins un écartement des images que je n'ai pas réussi à faire disparaître, même en appliquant les attributs margin:0 et padding:0 tant à l'ancre <a> qu'à l'image <img> et/ou #menimage (la ceinture et les bretelles).

 

Désolé ?;o)

[KewlCat]

Dylav, je crains que "float: left;" ce soit un peu trop pour un navigateur Web de PDA / Smartphone ...

[Dylav]

J'avoue que ça, je ne sais pas. Mais, dans la mesure où les recommandations W3C sont respectées... ?

 

En tout cas, j'ai essayé (avec mes images 64x64),

 

<style type="text/css">
#menimage {margin:0;padding:0;float:left;border:0;width:64px;height:64px;}
</style>

et, sur PC, ça ne fait pas disparaître les interstices, malheureusement --> avec Internet Explorer. Parce qu'avec FireFox, mon code d'origine fonctionne (avec juste border:0) : pas d'interstices.

 

Edit : ceci dit, j'ai aussi des interstices entre les images en appliquant l'écriture <table> de Bishop_metz... ? --> avec Internet Explorer.

Modifié le 30 novembre 2006 par dylav

[KewlCat]

ajoute "display: block"

[Dylav]

J'ai essayé

 

#menimage {float:left;border:0;display:block;width:64;height:64;}

Le problème reste entier : sous Internet Explorer, il apparaît un interstice entre les images, mais je suis bien incapable de déterminer s'il est de type margin ou padding...

[tangui]

par défaut, et pour ne pas avoir de problème de compatibilité, il faut rajouter margin:0px et padding:0px dans une class ou un id

[Dylav]

Hélas, Tangui, j'ai déjà essayé ça aussi.

Ce n'est pas nécessaire avec FireFox.

Mais c'est sans effet avec Internet Explorer...

[tangui]

j'avais mal lu le code...

essaye

a{ border:0px;}

img{border:0px;}