Discussion :

[vano]

Bonjour à tous,

en cours de développement d'une application web, je rencontre actuellement un problème de cross-browsing concernant l'affichage de simples boutons html entre les navigateurs firefox 1.0 et IE 6.0.

Plus explicitement :
--> sous firefox pas de problème :


--> par contre sous ie :


Voici le code source du tableau contenant les 3 boutons :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table width="100%" border="0">
        <tr>
          <td width="6%">&nbsp;</td>	  
          <td width="25%"><input name="_eventId_addPhPers" value="<spring:message code="2#3#AddRNRNBisPerson"/>" type="submit"/></td>
          <td width="6%">&nbsp;</td>
          <td width="25%"><input name="_eventId_addMoralPers" value="<spring:message code="2#3#AddBCEPerson"/>" type="submit"/></td>
          <td width="6%">&nbsp;</td>
          <td width="25%"><input name="_eventId_addNonResidentPers" value="<spring:message code="2#3#AddNRPerson"/>" type="submit"/></td>
		  <td width="6%">&nbsp;</td>
        </tr>
      </table>

Merci de me tenir informé si vous avez déjà été confronté à ce problème.

[iubito]

Solution 1 (dangereuse) : ajouter une largeur

Code :

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

<input ... style="width:120px;" />

Solution 2 (bidouille crade) : faire des liens avec un display:block, un padding, des bordures, un fond couleur bouton... et le href est le javascript que tu mets sur un bouton. Si tes boutons étaient de type submit, faut bidouiller avec un champ caché et faire un document.tonformulaire.submit()

[vano]

Merci Iubito,

tout d'abord merci pour ta réponse.

J'ai testé ta solution 1, ça marche mais jusqu'à une certaine largeur.
Pour voir les boutons correctement, il me faut une largeur de +/- 300px ce qui produit le même résultat qu'avant...
Très bizarement, jusqu'à 191px pas de prob puis une fois arrivé à 192px, le bouton est en gros trait... ??

Sinon si tu pouvais être un peu plus explicite quant à ta solution 2 ce serait sympa car je n'ai pas tout suivi... Tu veux dire que je devrais mettre mon texte sur plusieurs lignes ? (display:block) Merci de m'éclairer

[iubito]

J'ai retrouvé mon bout de CSS qui fait ça

Dans ta feuille de style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Un lien qui simule l'apparence d'un bouton */
a.bouton {
	display: block;
	text-decoration: none;
	width: 100px;
	text-align: center;
	padding: 5px;
	color: ButtonText;
	background-color: ThreeDFace;
	font: message-box;
	border-left: 1px solid ThreeDHighlight;
	border-top: 1px solid ThreeDHighlight;
	border-right: 2px solid ThreeDDarkShadow;
	border-bottom: 2px solid ThreeDDarkShadow;
}

Dans ton code HTML

Code :

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

1
2
3
4
 
<a class="bouton"
href="javascript:alert('coucou');document.tonformulaire.submit();">
Libellé du bouton</a>

ça n'imite pas parfaitement, mais ça s'en rapproche un peu.
L'inconvénient est aussi qu'il est pas ou moins accessible avec la touche Tabulation. Je m'explique : sur FF ou Opera on peut dire que la touche TAB ne se promène que de zones de formulaires en zones de formulaire.
Dans IE pas de paramétrage possible, la tabulation passe d'une zone à un lien, à un autre lien, à une autre zone... alors que ces rivaux ont des raccourcis pour passer de lien en lien.
Ce faux bouton devient un lien et n'est plus une zone de formulaire.

[vano]

Ok merci Iubito, je vois à présent ce que tu veux dire !

Mais je trouve dommage qu'il faille faire cette "bidouille crade"...

En plus on perd un peu le beau look-&-fell à la XP avec la couleur orange lors du rollover...

Enfin si je ne trouve pas d'autre moyen pour résoudre mon problème je procéderai de cette façon.

D'autres développeurs ont-il peut être déjà été confronté à ce problème ??

Merci