Représentation d'un bouton

Version imprimable

J'ai un bouton dans un tableau avec les styles suivants :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 .bouton { text-decoration: none; background-color: #CCCCFF; color: #0000FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding-left: 1em; padding-right: 1em; padding-top: 0.4em; padding-bottom: 0.4em; font-weight: bold; border-top: thin solid; border-bottom: thin solid; border-left: thin solid; border-right: thin solid; } tr.ligneBouton { height: 20px; padding-top: 1em; padding-bottom: 1em; } td.caseBouton { vertical-align: middle; }
Le problème est que tout s'affiche bien avec Firefox 1.0, Mozilla 1.4, Netscape 7 mais pas avec IE 6 (le tour de mon bouton n'apparait pas sur la partie haute). J'ai essayé de mettre 50px pour la hauteur du tr, mais le résultat est le même : le bouton occupe une partie de cette ligne en hauteur, est centré, mais est toujours sans bord sur la partie haute.

Quelqu'un a une idée concernant ce problème ?

t'as pas donné de couleur à tes bordures essaie ca :

Code:

1
2
3
4
5
 
border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   border-left: 1px solid #000;
   border-right: 1px solid #000;

à la place de :

Code:

1
2
3
4
border-top: thin solid;
   border-bottom: thin solid;
   border-left: thin solid;
   border-right: thin solid;

Ca ne change rien. Auparavant, mes bordures s'affichait en bleu, et le contenu en bleu clair.

Ce qui est bizarre, c'est que j'ai créé un bouton dans le tableau suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .BarreTitre { width: 98%; background-color: #E8E8F7; border: double silver; margin-top: 5px; margin-left: auto; margin-right: auto; text-align: left; } .BarreTitre td.Titre { width: 50%; text-align: left; vertical-align: top; } .BarreTitre td.Boutons { width: 50%; text-align: right; vertical-align: middle; }
et ça fonctionne parfaitement.

29/12/2004, 16h46
hdd

Pendant que j'y suis, il y a un autre problème avec IE : un trait d'épaisseur "thin" est deux fois plus gros que sur les autres navigateurs.

De mieux en mieux. Ca marche dans cette page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<html>
<head>
     <title>Annuaire</title>
     <link rel="stylesheet" type="text/css" href="/annuaire/includeFile/annuaire.css" />
     </head>
     <body onload="document.forms ['connexion'].elements ['login'].focus();">
          <form name="connexion" method="post" action="/annuaire/Annuaire;jsessionid=C9F228185B11D5466FCADC588FFC3B44">
               <input type="hidden" name="section" value="AG_login">
               <input type="hidden" name="action" value="verifierLogin">
               <div class="login">
                    <table class="tableauLogin">
                         <tr class="entete">
                              <td colspan="2">AUTHENTIFICATION</td>
                         </tr>
                         <tr>
                              <td colspan="2">&nbsp;</td>
                         </tr>
                         <tr>
                              <td class="legende titrenoirimp">Login</td>
                              <td class="saisie"><input type="text" name="login" /></td>
                         </tr>
                         <tr>
                              <td class="legende titrenoirimp">Mot de passe</td>
                              <td class="saisie"><input type="password" name="motDePasse" /></td>
                         </tr>
                         <tr>
                              <td colspan="2">&nbsp;</td>
                         </tr>
                         <tr class="ligneBouton">
                              <td colspan="2" class="centrer caseBouton"><a href="#" class="bouton" onclick="verifForm();" >Valider</a>&nbsp;&nbsp;<a href="#" class="bouton" onclick="viderChamps();">Effacer</a></td>
                         </tr>
                         <tr>
                              <td colspan="2">&nbsp;</td>
                         </tr>
                    </table>
               </div>
          </form>
     </body>
</html>

mais pas dans celle-ci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<html>
<head>
     <title>Ajout d'un utilisateur</title>
     <link rel="stylesheet" type="text/css" href="/annuaire/includeFile/annuaire.css" />
</head>
<body onload="document.forms ['ajoutUtilisateur'].elements ['login'].focus();">
     <form name="ajoutUtilisateur" method="post" action="/annuaire/Annuaire;jsessionid=DE2FE51931CB880479EDA5F1FCF5673A">
          <input type="hidden" name="section" value="A_ajouterUtilisateur">
          <input type="hidden" name="action" value="creer">
          <div class="ajoutUtilisateur">
               <table class="tableauAjoutUtilisateur" cellspacing="0">
                    <tr>
                         <th class="Identifiant">Login</th>
                         <th class="MotDePasse">Mot de passe</th>
                         <th class="ConfirmationMotDePasse">Confirmation</th>
                    </tr>
                    <tr>
                         <td class="Identifiant"><input type="text" name="login" size="10" maxlength="10" value="" /></td>
                         <td class="MotDePasse"><input type="password" name="motdepasse" size="10" maxlength="10" value="" /></td>
                         <td class="ConfirmationMotDePasse"><input type="password" name="confirmationmotdepasse" size="10" maxlength="10" value="" /></td>
                    </tr>
                    <tr>
                         <td colspan="3">&nbsp;</td>
                    </tr>
                    <tr>
                         <th class="MotDePasse">Profil</th>
                         <th colspan="2" class="alignerGauche"><div id="legendeDroits">Droits</div></th>
                    </tr>
                    <tr>
                         <td class="MotDePasse"><SELECT  NAME="profil" CLASS="" onchange="changerProfil();"><OPTION VALUE="ADMINISTRATEUR" >Administrateur</OPTION><OPTION VALUE="GESTIONNAIRE" SELECTED>Gestionnaire</OPTION></SELECT></td>
                         <td colspan="2" class="affichageHaut alignerGauche"><div id="droits"><label for="Agape"><input type="checkbox" id="Agape" name="droits" value="AGAPE" />Agape</label><br /><label for="Agora"><input type="checkbox" id="Agora" name="droits" value="AGORA" />Agora</label><br /><label for="EPP"><input type="checkbox" id="EPP" name="droits" value="EPP" />EPP</label><br /><label for="Bib"><input type="checkbox" id="Bib" name="droits" value="BIB" />BIB</label><br /><label for="Itarf"><input type="checkbox" id="Itarf" name="droits" value="ITARF" />Itarf</label></div></td>
                    </tr>
                    <tr>
                         <td colspan="3">&nbsp;</td>
                    </tr>
                    <tr class="ligneBouton">
                         <td class="centrer caseBouton" colspan="3"><a href="#" class="bouton" onclick="verifierFormulaire();">Valider</a></td>
                    </tr>
                    <tr>
                         <td colspan="3">&nbsp;</td>
                    </tr>
               </table>
          </div>
     </form>
</body>
</html>

Alors que personnellement je ne vois aucune différence dans le code d'affichage des boutons.

PS : je sais qu'il ne faut pas faire des affichages en colonnes avec des tableaux mais plutôt avec des CSS, mais comme je dois faire une application compatible Mozilla 1.4, Netscape 7 et Internet Explorer 6, je préfère ne pas prendre de risque.

31/12/2004, 23h16
mathieu

Un petit lien que je propose à ceux qui ont des problèmes entre IE et Mozilla :
http://dean.edwards.name/IE7/
Il s'agit d'un script Javscript à mettre sur ta page, ce qui a pour résultat de corriger un grand nombre de bug CSS d'IE et ainsi ta page aura presque la même apparence sous IE et Mozilla
03/01/2005, 09h19
hdd

C'est à ne plus rien y comprendre : j'ai fait un copier/coller de ma page login.jsp vers toutes les autres pages où j'avais des boutons, et ça fonctionne désormais. Et, pour moi, la seule différence vient de l'inversion entre le "class=" et le "colspan=" dans le td.