Problèmes de bordure avec IE

Bonjour, je suis toujours avec le problème de mes tableaux, mais cette fois ci c'est un problème de compatibilité.


Voici donc mes sources CSS

.clubtab {
border : 0; 
margin : auto; 
width : 100%; 
border-spacing: 1px;
margin-bottom : 10px; 
} 
.clubtab th {
background : url(../../club/img/ap_contacts.gif) repeat; 
height : 22px; 
padding-left : 3px; 
color : #ffffff; 
font-weight : bold; 
} 
.clubgauche {
background-color : #dfe8ff; 
color : #000000; 
width : 25%; 
border : 0;
font-weight : bold; 
vertical-align : middle; 
} 
.clubdroite {
background-color : #e6edff; 
vertical-align : middle; 
border : 0;
padding : 3px; 
} 

Et le code de mon tableau (je donne juste les premières lignes, ça suffit)

<table class="clubtab">
  <tr><th colspan="2">Votre chronique</th></tr>
  <tr><td class="clubgauche">Pseudo *</td>  <td class="clubdroite"><input name="psedo" class="class1" value="" /></td></tr>
  <tr><td class="clubgauche"><b>Email</b></td>
  <td class="clubdroite"><input name="mail" size="70" class="class1"  value="" /></td></tr>
  <tr><td class="clubgauche"><b>Site web</b></td>
  <td class="clubdroite"><input name="site" size="70" value="http://" class="class1" /></td></tr>
</table>

Quelqu'un saurait-il comment je peux afficher ce tableau de la façon dont je souhaiterais dans les deux navigateurs ?

D'avance merci
Modifié par le_fleau (12 Jan 2009 - 13:36)

Bonjour,

Personnellement je ne vois pas de différence entre les deux captures, le rendu sur les deux navigateurs est certes un peu différent, mais je n'y vois rien de genant.

Par contre pour l'accessibilité de tes formulaires, leur utilisabilité, leur présentation je t'invite à lire ces deux ressources:
- http://www.openweb.eu.org/articles/formulaire_accessible/
- http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_intro.htm

Merci de ta réponse, mais la différence qui me gêne se trouve au niveau de l'espacement entre les cellules. Sous IE il est plus important que sous Firefox.
(test fait avec IE7 et FF 1.5)
Modifié par le_fleau (08 Feb 2006 - 16:04)

Et comme ça:

.clubtab {
border : 0; 
margin : auto; 
width : 100%; 
[b]border-collapse: collapse;[/b]
border-spacing: 1px;
margin-bottom : 10px; 
} 

.clubgauche {
background-color : #dfe8ff; 
color : #000000; 
width : 25%; 
[b]border : 1px solid white;[/b]
font-weight : bold; 
vertical-align : middle; 
} 
.clubdroite {
background-color : #e6edff; 
vertical-align : middle; 
[b]border : 1px solid white;[/b]
padding : 3px; 
}

Par contre pas eu le temps de tester sous IE si ca corrige le problème.

Merci beaucoup ! Ca marche

Enfin pour en revenir à ce qui concerne l'accessibilité du formulaire... Je n'ai aucun problème pour intégrer les balises <label>.... Mais alors les balises <fieldset>... Etant donné que ce n'est pas possible de faire <fieldset><tr><td><input .../></td></tr><tr><td><input .../></td></tr></fieldset>, dans le cadre de mon tableau, c'est pas vraiment possible de les intégrer... A moins de recommencer des tableax pour chaque groupes de champs.... Est ce que cela pose vraiment problème si je ne l'utilise pas ? Au niveau de l'accessibilité ? Du XHTML strict ?

D'avance merci

le_fleau a écrit :
Enfin pour en revenir à ce qui concerne l'accessibilité du formulaire... Je n'ai aucun problème pour intégrer les balises <label>.... Mais alors les balises <fieldset>... Etant donné que ce n'est pas possible de faire <fieldset><tr><td><input .../></td></tr><tr><td><input .../></td></tr></fieldset>, dans le cadre de mon tableau, c'est pas vraiment possible de les intégrer... A moins de recommencer des tableax pour chaque groupes de champs.... Est ce que cela pose vraiment problème si je ne l'utilise pas ? Au niveau de l'accessibilité ? Du XHTML strict ?

D'avance merci

Ou bien de ne pas utiliser de tableaux et de regrouper chaque groupe de champs dans un fieldset comme tu le constastes toi même au lieu de faire un tableau pour chaque groupe . Voir les deux liens précédents.

Oui, c'est sûr, mais le problème c'est que c'est moins joli

Bonjour,

L'élément fieldset n'a rien d'obligatoire, et a tendance aujourd'hui à être utilisé sans justification.

Il est destiné à regrouper structurellement et visuellement plusieurs champs (et labels) lorsque ceux-ci forment un groupe logique (Nom + Prénom, par exemple) dans un formulaire complexe, et qu'il n'y a pas d'autres moyens de clarifier le formulaire.

Il permet surtout de légender ces groupes (élément legend) et perd une grande partie de son utilité en l'absence de cette légende.

Ici, les questions à se poser sont :
- le formulaire comporte-t-il effectivement des groupes de champs fonctionnels, ayant entre eux un lien de sens et d'utilisation, tels que deux champs nom et prénom, ou des champs "numéro" et "nom de la rue", etc ?
- le formulaire est-il suffisamment complexe pour justifier ces regroupements ?
- la présentation et la structure existante sont-elles suffisamment explicites ?
Modifié par Laurent Denis (09 Feb 2006 - 07:09)

Oui, effectivement, il peut y avoir des regroupements... D'ailleurs, dans certains de mes formulaires, je regroupe ces champs sous un grand titre, en intercallant un <tr><td colspan="2">Nom du regroupement</td></tr>.
Mais le fieldset, c'est pas très beau, et ça irait assez mal dans le design de mes formulaires... Est ce si gênant pour l'accessibilité de ne pas les utiliser, sachant que j'utilise tout de même les <label> ??

D'avance merci

Voila le code de mon formulaire... Donc sans <fieldset>... Le fait qu'il n'y en ait pas, est-il vraiment gênant... Le formulaire peut-il être accessible pour un non voyant ??

Merci pour vos informations

<table class="clubtab">
  <tr><th colspan="2">Votre chronique</th></tr>
  <tr><td class="clubgauche"><label for="postby">Pseudo *</label></td>
  <td class="clubdroite"><input name="postby" id="postby" size="70" class="class1" value="" /></td></tr>
  <tr><td class="clubgauche"><label for="email">Email</label></td>
  <td class="clubdroite"><input name="email" id="email" size="70" class="class1"  value="" /></td></tr>
  <tr><td class="clubgauche"><label for="website">Site web</label></td>
  <td class="clubdroite"><input name="website" id="website" size="70" class="class1" value="http://" /></td></tr>
  <tr><td class="clubdark" colspan="2">VOTRE CHRONIQUE</td></tr>
  <tr><td class="clubgauche"><label for="tbl_name">&Agrave; publier dans... *</label></td>
  <tr><td  colspan="2" class="clubdark">RUBRIQUE2</td></tr>
  <tr><td class="clubgauche">Uploader un fichier MP3</td>
  <td class="clubdroite"><input type="file" name="file" size="50" class="class1" /></td></tr>
  <tr><td class="clubgauche"><label for="pod_url">OU URL fichier MP3</label></td>
  <td class="clubdroite"><input name="pod_url" id="pod_url" size="70" class="class1" value="" /></td></tr>
  <tr><td colspan="2" class="clubmedium2"><input type="submit" value="Envoyer" name="submit" /></td></tr>
</table>

Modifié par le_fleau (13 Feb 2006 - 18:07)