[javascript/css] Pb bordures tableau dessinées sous IE

Pb bordures tableau dessinées sous IE [javascript/css] - HTML/CSS - Programmation

Marsh Posté le 24-05-2005 à 17:53:51    

Bonjour !
 
J'ai un problème d'affichage au niveau des bordures de tableau.
J'ai 4 tableaux (dans une cellule d'un autre tableau). Chacun de ces 4 tableaux contient un bout de formulaire.
J'aimerais que lorsque l'utilisateur clique sur un champ, les bordures du tableau/formulaire correspondant apparaissent.
 
Je m'y prend ainsi:
 
- bout du fichier scripts.js
 

Code :
  1. var lastFocus;
  2. function setFocus(param){
  4. // si ya un numéro de tableau dans lastFocus, alors ses bordures ne s'affichent plus
  5. switch (lastFocus)
  6. {
  7.  case '1' :
  8.   document.getElementById("tabForm1" ).style.borderStyle = "hidden";
  9.   break;
  10.  case '2' :
  11.   document.getElementById("tabForm2" ).style.borderStyle = "hidden";
  12.   break;
  13.  case '3' :
  14.   document.getElementById("tabForm3" ).style.borderStyle = "hidden";
  15.   break;
  16.  case '4' :
  17.   document.getElementById("tabForm4" ).style.borderStyle = "hidden";
  18.   break;
  19.  default:
  20.   break;
  21. }
  23. lastFocus = param; // Mémorise le numéro de tableau où le champ a été cliqué
  25. // ici on fait apparaitre les bordures d'un tableau en fonction du champs ou l'utilisateur a cliqué
  26. switch (param)
  27. {
  28.  case '1' :
  29.   document.getElementById("tabForm1" ).style.borderStyle = "solid";
  30.   document.getElementById("tabForm1" ).style.borderColor = "#FF6633";
  31.   break;
  32.  case '2' :
  33.   document.getElementById("tabForm2" ).style.borderStyle = "solid";
  34.   document.getElementById("tabForm2" ).style.borderColor = "#FF6633";
  35.   break;
  36.  case '3' :
  37.   document.getElementById("tabForm3" ).style.borderStyle = "solid";
  38.   document.getElementById("tabForm3" ).style.borderColor = "#FF6633";
  39.   break;
  40.  case '4' :
  41.   document.getElementById("tabForm4" ).style.borderStyle = "solid";
  42.   document.getElementById("tabForm4" ).style.borderColor = "#FF6633";
  43.   break;
  44.  default:
  45.   document.getElementById("tabForm1" ).style.borderStyle = "solid";
  46.   document.getElementById("tabForm1" ).style.borderColor = "#FF6633";


 
- code css d'un tableau:
 

Code :
  1. .tableScenario {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 12px;
  4. color: #444444;
  5. border-style: solid;
  6. border-top: hidden;
  7. border-bottom: hidden;
  8. border-left: hidden;
  9. border-right: hidden;
  10. padding-top: 15px;
  11. width: 160px;
  12. }


 
Sur Firefox ca marche très bien, le moindre clic affiche les bordures du tableau correspondant.
Sous IE, chaque clic affiche les bordures, seulement elles ne sont pas prédessinées, et à chaque clique les champs des tableaux "bougent".
Comment empêcher cela ?
 
Merci d'avance !


Message édité par Pwill le 24-05-2005 à 17:55:18
Reply

Marsh Posté le 24-05-2005 à 17:53:51   

Reply

Marsh Posté le 24-05-2005 à 18:00:00    

ton script corrigé :  
 

Code :
  1. var lastFocus;
  3. function setFocus(param){
  4. // si ya un numéro de tableau dans lastFocus, alors ses bordures ne s'affichent plus  
  5. document.getElementById("tabForm1"+lastFocus).style.borderStyle = "hidden";
  7. lastFocus = param; // Mémorise le numéro de tableau où le champ a été cliqué  
  9. // ici on fait apparaitre les bordures d'un tableau en fonction du champs ou l'utilisateur a cliqué  
  10. document.getElementById("tabForm" + param).style.borderStyle = "solid";
  11. document.getElementById("tabForm" + param).style.borderColor = "#FF6633";
  12. document.getElementById("tabForm" + param).style.borderWidth = "1px";
  13. }


 
et ton style :  
 

Code :
  1. .tableScenario {
  2.     font-family: Arial, Helvetica, sans-serif;
  3.     font-size: 12px;
  4.     color: #444444;
  5.     border: none;
  6.     padding-top: 15px;
  7.     width: 160px;
  8. }

Reply

Marsh Posté le 24-05-2005 à 18:00:48    

essaye ca déjà, ensuite on verra

Reply

Marsh Posté le 25-05-2005 à 09:22:38    

Je te remercie j'essaye ca  ;)

Reply

Marsh Posté le 25-05-2005 à 09:32:15    

Vive le tabless!
Faut arrêter avec les tableaux!
 
-> une remarque qui n'aide pas mais bon...

Reply

Marsh Posté le 25-05-2005 à 10:02:46    

Oui j'attendais la remarque, si j'ai du temps je reprends tout sans...

Reply

Marsh Posté le 25-05-2005 à 10:09:31    

bah si c'est pour afficher des données tabulaires, il faut mieux avoir un tableau. Mais sinon, ben c'est clair ke ca ne sert à rien

Reply

Marsh Posté le 25-05-2005 à 10:25:09    

Code :
  1. .tableScenario { 
  2.      font-family: Arial, Helvetica, sans-serif; 
  3.      font-size: 12px; 
  4.      color: #444444; 
  5.      border: none;
  6.       border-width: 1px;
  7.      padding-top: 15px; 
  8.      width: 160px; 
  9. }


 

Code :
  1. function setFocus(param){
  2.   try {
  3.   document.getElementById("tabForm" + lastFocus).style.borderStyle = "none";
  4.   }
  5.   catch (ex){
  6.   };
  7.   lastFocus = param;
  8.   document.getElementById("tabForm" + param).style.borderStyle = "solid";
  9.   document.getElementById("tabForm" + param).style.borderColor = "#FF6633";
  10.   document.getElementById("tabForm" + param).style.borderWidth = "1px";
  12. }


 
Ca passe bien sour FireFox, seulement sous IE j'ai toujours ce problème de tableaux qui bougent lorsque les bordures apparaissent.
Ils ne sont pas prédessinés j'ai l'impression.

Reply

Marsh Posté le 25-05-2005 à 10:27:21    

Faut dans le style mettre ça :

Code :
  1. .tableScenario {
  2. [...]
  3.   border: 1px solid #fff; // Remplacer #fff par couleur du fond
  4. }


Puis le script :

Code :
  1. function setFocus(param){
  2.   try {
  3.     document.getElementById("tabForm" + lastFocus).style.borderColor = "#fff"; // Couleur du fond de nouveau
  4.   } catch (ex){
  5.   };
  6.   lastFocus = param;
  7.   document.getElementById("tabForm" + param).style.borderColor = "#f63";
  8. }


Message édité par FlorentG le 25-05-2005 à 10:27:34
Reply

Marsh Posté le 25-05-2005 à 10:31:42    

Ca peut être une solution, je la teste.
Mais none et hidden ca sert à quoi ?  
Je pensais que hidden prévoyait la place pour l'objet sans l'afficher. :??:

Reply

Marsh Posté le 25-05-2005 à 10:31:42   

Reply

Marsh Posté le 25-05-2005 à 10:34:54    

Effectivement elle marche à l'identique sur les deux navigateurs, merci Florent ;)

Reply

Marsh Posté le 25-05-2005 à 10:35:27    

edit : grilled
 
salauddd FlorentG
 
/me sort la pelle à clous


Message édité par gatsusat le 25-05-2005 à 10:36:18
Reply

Marsh Posté le 25-05-2005 à 10:37:59    

Celle-là : [:florentg] ? :D

Reply

Marsh Posté le 25-05-2005 à 10:54:51    

ouais je la veut

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed