Représentation d'un bouton

**hdd** · 29/12/2004, 16h21

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

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
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 ?

**O-Zone** · 29/12/2004, 16h30

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

Code :

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

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 :

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

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

**hdd** · 29/12/2004, 16h40

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 :

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

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.

**hdd** · 29/12/2004, 16h46

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.

**hdd** · 31/12/2004, 11h00

De mieux en mieux. Ca marche dans cette page :

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
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 :

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

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.

**mathieu** · 31/12/2004, 23h16

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

**hdd** · 03/01/2005, 09h19

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.

Représentation d'un bouton

HTML

Vue hybride

Discussions similaires

Partager

Partager