Affichage selon Navigateur

[july]

Bonjour,

J'ai une page php/html sur mon site web qui contient un formulaire d'envoi de mail. Sur I.E sur pc l'affichage est parfait, mais sur i.e sur mac c'est pas très beau. En effet, la taille des champs n'est pas interprété de la meme façon.

Idem si je consulte le site sur Netscape.

 

Comment faire ?

 

En fait, le plus chiant c'est que l'affichage soit différent non seulement selon le navigateur, mais surtout selon la plateforme.

Que dois-je faire ?

 

Merci

[padawan]

Salut,

 

Ca va peut-être te paraitre idiot, mais si tu veux que ta page s'affiche correctement sur un maximum de navigateur/OS, il faut respecter les normes au plus près.

 

J'ai aussi remarqué que la plupart du temps, quand une de mes pages s'affiche bien sur IE mais mal ailleurs, il s'agit en fait d'une erreur dans mon code. Erreur que IE semble complètement ignorer...

Une fois le code corrigé, hop, ça marche bien partout.

 

Donc je te conseille de bien relire ton code, et de traquer la moindre petite erreur.

[july]

Voici donc mon code... Mais je l'ai relu plusieurs fois et je n'y trouve pas d'erreur (enfin je crois...)

 

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td background="includes/img/contact_r6_c1.jpg" width="151" height="81"></td>
  <td background="includes/img/contact_r6_c2.jpg" width="7" height="81"></td>
  <td background="includes/img/contact_r6_c3.jpg" width="48" height="81"></td>
  <td background="includes/img/contact_r6_c4.jpg" width="208" height="81"></td>
  <td background="includes/img/contact_r6_c5.jpg" width="226" height="81"></td>
  <td background="includes/img/contact_r6_c6.jpg" width="7" height="81"></td>
  <td background="includes/img/contact_r6_c7.jpg" width="153" height="81"></td>
 </tr>
 <tr>
  <td background="includes/img/contact_r7_c1.jpg" width="151" height="232"></td>
  <td background="includes/img/contact_r7_c2.jpg" width="7" height="232"></td>
  <td background="includes/img/contact_r7_c3.jpg" width="48" height="232"></td>
  <td background="includes/img/contact_r7_c4.jpg" width="208" height="232" align="left">
<form name="formContact" method="post" action="index.php?page=3&action=send"><input type="text" name="mail" value="Enter your e-mail" class="input" onBlur="test_texte(this,'Enter your e-mail');" onFocus="efface_text_one_time(this,'Enter your e-mail');" size="36" maxlength="50"><br><input type="text" name="name" value="Enter your name" class="input" onBlur="test_texte(this,'Enter your name');" onFocus="efface_text_one_time(this,'Enter your name');" size="36" maxlength="50"><br><textarea name="message" class="textearea" rows="6" cols="33" onBlur="test_texte(this,'Enter your message');" onFocus="efface_text_one_time(this,'Enter your message');">Enter your message</textarea><br><br><center><input type="submit" name="sd" value="Send" class="input">   <input type="button" name="button1" value="Clear" onClick="clear_form();"  class="input"></center>   </form>
  </td>
  <td background="includes/img/contact_r7_c5.jpg" width="226" height="232">
  <table border="0">
  <tr>
  <td width="30" height="220" valign="top"></td>
  <td width="196" height="220" valign="center">
  <p class="texte" align="justify">
blablabla
  </p>
  </td>
  </tr>
  </table>   
  </td>
  <td background="includes/img/contact_r7_c6.jpg" width="7" height="232"></td>
  <td background="includes/img/contact_r7_c7.jpg" width="153" height="232"></td>
 </tr>
 <tr>
  <td background="includes/img/contact_r8_c1.jpg" width="151" height="28"></td>
  <td background="includes/img/contact_r8_c2.jpg" width="7" height="28"></td>
  <td background="includes/img/contact_r8_c3.jpg" width="48" height="28"></td>
  <td background="includes/img/contact_r8_c4.jpg" width="208" height="28"></td>
  <td background="includes/img/contact_r8_c5.jpg" width="226" height="28"></td>
  <td background="includes/img/contact_r8_c6.jpg" width="7" height="28"></td>
  <td background="includes/img/contact_r8_c7.jpg" width="153" height="28"></td>
 </tr>
</table>

Modifié le 8 mars 2005 par july

[Florent]

Essaies aussi de vérifier ta page a travers un outils comme les valideurs W3C : http://validator.w3.org/

[tangui]

Test avec mozilla, je pense que safari (mac) et mozilla doivent avoir un fonctionnement similaire non??

[july]

n'y a-t'il pas un moyen Javascript de savoir sur quel navigateur je suis, et je formate ma page en fonction du navigateur ?

 

Est-ce une méthode correcte ou y a-t'il plus performant ?

[Florent]

De mémoire il y a moyen de connaitre le navigateur mais cela va te rajouter du boulot, une page par navigateur....., a la limite si tu pouvais mettre l'adresse de ton site sur le forum voir en MP (petit bouton MP sous le nom utilisateur) histoire de le constater et eventuellement de d'aider encore plus..

[padawan]

Salut tout le monde,

 

J'ai testé le code html que tu donnes sous IE, Opera et Firefox, je n'ai pas constaté de problème.

Si j'ai l'occasion de booter sous linux je testerai aussi sous konqueror pour voir.

 

Peux-tu faire des copies d'écran du problème sous Netscape et Mac ?

D'ailleurs c'est quel navigateur sous Mac, safari ?

[GritNatZ]

n'y a-t'il pas un moyen Javascript de savoir sur quel navigateur je suis, et je formate ma page en fonction du navigateur ?

 

Est-ce une méthode correcte ou y a-t'il plus performant ?

462698[/snapback]

Salut

 

Il y a bien un moyen de retourner

le nom du navigateur en javascript :

Va voir ici

 

La solution serait de travailler avec les CSS

et de reparmétrer les tailles ou les positions

de tes éléments via un petit script.

Pas besoin pour cela de faire une page

pour chaque type de navigateur.

 

L'inconvénient réside dans le fait

que certains utilisateurs désactivent

javascript, rendant ainsi la mise en

page dynamique totalement obsolète.

Modifié le 22 février 2005 par GritNatZ

[KewlCat]

Voici donc mon code... Mais je l'ai relu plusieurs fois et je n'y trouve pas d'erreur (enfin je crois...)

 

(...)
  <td background="includes/img/contact_r7_c4.jpg" width="208" height="232" align="left">
<form name="formContact" method="post" action="index.php?page=3&action=send"><input type="text" name="mail" value="Enter your e-mail" class="input" (...)

class="input" ?

Et si tu nous disais quel style est associé à cette classe ?

A priori, si le formatage est différent, c'est à cause du style de tes champs. Sur le reste de la page (je parle là du tableau) il y a peu de chances qu'il y ait des "erreurs"...