Fusion de cellules + IE + CSS

Bonjour,

Alors j'ai toujours quelques petits soucis pour l'adaptation de mon site sur IE (j'ai 7 sur le pc en plus donc à priori le moins pire). En fait, mes tableaux ne me servent pas à la mise en page (j'ai bien compris le gain du css par rapport aux tableaux grâce au super tuto du zéro), mais à faire de vraies listes tabulaires. Par exemple, la liste des membres du bureau avec rôle, nom, adresse, tel et @mail.
Et j'ai des commissions qui prennent plusieurs personnes donc j'ai besoin de fusionner certaines cellules, mais c'est là que ça bloque, impossible de faire reconnaitre à IE les notions de colspan et rowspan. J'imagine que c'est un problème connu mais bizarrement je ne trouve pas d'info de réponse sur la toile.

Y'a t-il une astuce? Un truc particulier à faire?

D'avance, merci!

--

Je bosse sur frontpage, mais me taper pas, je débute! Le code ça vient doucement mais surement...
Configuration: Windows XP
Firefox 2.0.0.12

2 réponses

  1. Bonjour,

    En fait, je viens de comprendre un truc! C'est pas la fusion qui pose problème mais le positionnement du texte dans les cellules, tout est décallé à gauche sur une largeur réduite (beaucoup plus petite que la largeur de la cellule, c'est flagrant sur un autre tableau) malgré le text-align center.

    Allez voilà les codes (vous moquez pas quand même!). D'ailleurs si vous avez d'autres remarques autre que sur la fusion, n'hésitez pas!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Le Tennis de Table dans les Pyrénées Atlantiques</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    	   <script language="javascript" src="../../gestionsite/css/page.js"></script>
           <link rel="stylesheet" type="text/css" href="../../gestionsite/css/csscompocomite.css">
       </head>
       
       <body>
       <!-- ici on mettrait un <div style="float:left;" id="conteneurmenu"> 
        mais l'affichage du menu dans un premier temps, puis son positionnement
        par le javascript donne un effet desagréble de clignotement.
        Voici l'astuce pour l'éviter. -->
    	 <!-- L'en-tête -->
     
           <div id="en_tete">
               
           </div>
    <div id="conteneurmenu">
    <script language="Javascript" type="text/javascript">
        preChargement();
    </script>
          <p id="menu1" class="menu"
                onmouseover="MontrerMenu('ssmenu1');"
                onmouseout="CacherDelai();">
            <a href="../../gestionsite/acceuil.html"
                onfocus="MontrerMenu('ssmenu1');">ACCUEIL<span> :</span></a>
        </p>
    
    		 <p id="menu2" class="menu"
                onmouseover="MontrerMenu('ssmenu2');"
                onmouseout="CacherDelai();">
            <a href="../accueilsectiongestion.html"
                onfocus="MontrerMenu('ssmenu2');">RETOUR GESTION<span> :</span></a>
        </p>
    	   
    	 <p id="menu3" class="menu"
                onmouseover="MontrerMenu('ssmenu3');"
                onmouseout="CacherDelai();">
            <a href="javascript:history.go(-1)"
                onfocus="MontrerMenu('ssmenu3');">RETOUR<span> :</span></a>
        </p>
    	
    </div>
      <script language="Javascript"
          type="text/javascript">
        // Vous pouvez éventuellement changer des variables ici
        // voir la configuration du menu plus bas.
        Chargement();</script>
     
       <!-- Le corps -->
     
           <div id="corps">
               <h1>Le Comité Départemental</h1>
           
               <p>
                  <h2>Composition</h2>
               </p>
           
               <table>
    		   <tr>
    		   <td>PRESIDENT D'HONNEUR</td>
    		   <td>Jean-Claude LARTIGAU</td>
    		   <td>L'arrayade-37 allée des Pommiers<br/>40 990 MEES</td>
    		   <td>05 58 97 48 67</td>
    		   </tr>
    		   <tr>
    		  <td>PRESIDENT</td>
    		  <td>Daniel DUMONT</td>
    		   <td>Villa Lagunenzat- Chemin Harriague<br/>64 210 ARBONNE</td>
    		   <td>05 59 41 84 11<br/>06 62 86 89 46</td>
    		   <td><a href ="mailto:cd64dd@cegetel.net">cd64dd@cegetel.net</a></td>
    		   </tr>
    		   <tr>
    		   <td rowspan="2">VICE PRESIDENTS</td>
    		   <td>Michel PITERS</td>
    		   <td>Centre Nelson Paillou, siège du CD 64 TT</td>
    		   <td>05 59 92 62 64 (T)<br/>06 71 49 27 74</td>
    		   <td><a href ="michel.piters@mediafibre.com">michel.piters@mediafibre.com</a></td>
    		   </tr>
    		   <tr>
    		   <td>Jean PICARD</td>
    		   <td>Ty Bihan 8 rue du Millet<br/>64 600 ANGLET</td>
    		   <td>05 59 63 84 95</td>
    		   <td><a href ="mailto:jean.e.picard@wanadoo.fr">jean.e.picard@wanadoo.fr</a></td>
    		   </tr>
    		   <tr>
    		   <td>SECRETAIRE</td>
    		   <td>Pascal DESCHAMPS</td>
    		   <td>4 route de Luy<br/>64 160 BERNADETS</td>
    		   <td>05 59 33 04 19<br/>05 59 33 62 41 (T)</td>
    		   <td><a href="mailto:ping64.bernadets@laposte.net">ping64.bernadets@laposte.net</a></td>
    		   </tr>
    		   <tr>
    		   <td>TRESORIER</td>
    		   <td>Michel PITERS</td>
    		   <td>Centre Nelson Paillou, siège du CD 64 TT</td>
    		   <td>05 59 92 62 64 (T)<br/>06 71 49 27 74</td>
    		   <td><a href ="mailto:michel.piters@mediafibre.com">michel.piters@mediafibre.com</a></td>
    		   </tr>
    		   <tr>
    		   <td>REFERENT CLUBS</td>
    		   <td>Jean-Patrick BAZILE</td>
    		   <td>14 place de la Hourquie<br/>64 160 MORLAAS</td>
    		   <td>05 59 33 01 74<br/>06 07 82 00 09</td>
    		   <td><a href="mailto:jean-patrick.bazile@univ-pau.fr">jean-patrick.bazile@univ-pau.fr</a></td>
    		   </tr>
    		   <tr>
    		   <td rowspan="2">MEMBRES</td>
    		   <td>Daniel BARBE-BARAILH</td>
    		   <td>7 allées des Fauvettes<br/>64 110 JURANCON</td>
    		   <td>05 59 06 39 76<br/>06 64 06 30 49</td>
    		   <td><a href="mailto:lesgerbauds@wanadoo.fr">lesgerbauds@wanadoo.fr</a></td>
    		   </tr>
    		   <tr>
    		   <td>Jean LOUSTAU</td>
    		   <td>2, rue des tilleuls<br/>64 121 SERRES CASTETS</td>
    		   <td>05 59 33 77 67<br/>06 87 83 59 30</td>
    		   <td><a href="mailto:jean.loustau@neuf.fr">jean.loustau@neuf.fr</a></td>
    		   </tr>
    		   <tr>
    		   <td>EDUCATEUR SPORTIF DEPARTEMENTAL</td>
    		   <td>Christophe BLANCHE</td>
    		   <td>44, rue Maréchal Joffre<br>64 000 PAU</td>
    		   <td>06 84 01 45 74<br/>05 59 27 48 33</td>
    		   <td><a href="mailto:c.blanche.cdst64@orange.fr">c.blanche.cdst64@orange.fr</a></td>
    		   </tr>
    		   <tr>
    		   </table>
    		   <table>
    		   <td colspan="5">FONCTIONNEMENT DU COMITE</td>
    		   </tr>
    		   <tr>
    		   <td rowspan="7">COURRIER: adressé par @mail <strong>simultanément</strong> aux acteurs suivants</td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:cd64dd@wanadoo.fr">Daniel DUMONT</a></td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:ping64.bernadets@laposte.net">Pascal DESCHAMPS</a></td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:c.blanche.cdst64@orange.fr">Christophe BLANCHE</a></td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:michel@cabinet-mauquin.fr">Michel PITERS</a></td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:jean-patrick.bazile@univ-pau.fr">Jean-Patrick BAZILE<a></td>
    		   </tr>
    		   <tr>
    		   <td><a href="mailto:jean.e.picard@wanadoo.fr">Jean PICARD</a></td>
    		   </tr>
    		   <tr>
    		   <td colspan="3"><strong>RESULTATS SPORTIFS</strong>: doivent être communiquer le jour même de la rencontre.<br/>
    		   Feuille de rencontre à adresser au Comité Départemental des Pyrénées Atlantiques<br/>
    		   Centre Nelson Paillou<br/>
    		   12, rue du Professeur Garrigou Lagrange<br/>
    		   64 000 PAU</td>
    		   </tr>
    		   <tr>
    		   <td rowspan="5">COMMISSION TECHNIQUE</td>
    		   </tr>
    		   <tr>
    		   <td>Christophe BLANCHE</td>
    		   </tr>
    		   <tr>
    		   <td>Stéphane REGOURDAL</td>
    		   </tr>
    		   <tr>
    		   <td>Christian ETCHEVERRY</td>
    		   </tr>
    		   <td>Houchang ZARMEHRZAMIN</td>
    		   </tr>
    		   <tr>
    		    <td rowspan="5">COMMISSION SPORTIVE</td>
    			</tr>
    			<tr>
    		   <td>Daniel BARBE-BARRAILH</td>
    		   </tr>
    		   <tr>
    		   <td>Michel PITERS</td>
    		   </tr>
    		   <tr>
    		   <td>Christophe BLANCHE</td>
    		   </tr>
    		   <tr>
    		   <td>Jean LOUSTAU</td>
    		   </tr>
    		   <tr>
    		    <td rowspan="3">COMMISSION ARBITRAGE</td>
    			</tr>
    			<tr>
    		   <td>Daniel DUMONT</td>
    		   </tr>
    		   <td>Jean PICARD</td>
    		   </tr>
    		   <tr>
    		    <td>RESPONSABLE CLASSEMENT</td>
    		   <td>José MARCO</td>
    		   </tr>
    		   <tr>
    		    <td>RESPONSABLE CRITERIUM DEPARTEMENTAL</td>
    		   <td>Jean PICARD</td>
    		   </tr>
    		   <tr>
    		    <td>DELEGUE AUPRES DE LA LIGUE ET DE LA FFTT</td>
    		   <td>Daniel DUMONT</td>
    		   </tr>
    		   <tr>
    		    <td>RESPONSABLE SITE INTERNET</td>
    		   <td><a href="mailto:sitecd64tt@free.fr">Michael GIROUD-PIFFOZ</a></td>
    		   </tr>
    		   </table><br/><br/>
    		
         	 
    	  
    	  </div>
        </body>
    </html>
    


    Et le CSS:
    /***** menu CSS *****/
    body {
       width: 100%;
       height: 100%;
       margin: 0px;
       background-color:#ffff88;
    }
    #conteneur
    {
    position:relative;
    height:100%;
    margin:0;
    padding:0;
    }
    
    #en_tete
    {
       width: 100%;
       height: 90px;
       background-image: url("../images/panorama.png");
       background-position:top;
       background-repeat: no-repeat;
       position:absolute;
       position:center;
       top:5px;
       }
    
    @media print {
    /*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
    	.menu, .ssmenu {
    		visibility:hidden;
    	}
    }
    
    .menu, .ssmenu {
    	background-color:#ffe01f;
    	color:green;
    	font-weight:bold;
    	font-family:"MS Sans Serif", "sans-serif", Verdana, Arial;
    	text-align: center;
    	border:1px solid #EFB;
    	padding:1px;
    	/* width et margin sont au cas où le javascript est désactivé. */
    	width:15em;
    	margin:1em;
    }
    
    /* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
    .menu {
    	text-align:center;
    	font-size:14px;
    	border: 4px;
        border-style: ridge;
        border-color: white;
    }
    /* .ssmenu = Les parties "déroulantes" qui s'affiche au survol d'un .menu */
    .ssmenu {
    
    	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AA8922,endColorStr=#543210);
    	white-space : no-break;
    	font-size:12px;
    }
    
    .menu span, .ssmenu span {
    /* Ne pas toucher
    	C'est pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
    	pause dans l'élocution */
    	display:none;
    }
    
    .ssmenu ul, .ssmenu li {
    /* Ne pas trop toucher.
    	Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
    	padding:0;
    	margin:0;
    	list-style-type:none;
    }
    
    .menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
    /* Les liens qui ne sont pas sous le curseur. */
    	color:green;
    	padding:2px 1px;
    	text-decoration:none;
    /* Ne pas modifier le block, margin et width */
    	display:block;
    	margin:0px;
    	width:100%;
    }
    html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
    html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
    	width:auto;
    }
    
    .ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
    /* Les liens sous le curseur.
    	On change les couleurs du texte et de fond, et on enlève le soulignement.
    	*/
    	background-color:green;
    	color:#ffe01f;
    	text-decoration:none;
    }
    
    
    img {
    /* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
    	car c'est vilain :-p */
    	border:none;
    }
    
    .ssmenu img {
    /* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
    	margin-right:2px;
    }
    
    .ssmenu img.hr {
    /* Encore un peu expérimental, un <hr /> entre deux items pour faire un "séparateur"... */
    	margin-top:1px;
    	margin-bottom:1px;
    	margin-left:0;
    	margin-right:0;
    	width:100%;
    	display:block;
    }
    
    
    
    /* Le corps de la page */
    
    #corps
    {
       margin-left: 0%;
       margin-top: 1%;
       margin-bottom: 20px;
       background-repeat: no-repeat;
       position:absolute;
       position:center;
       padding: 0px;
       color: #009900;
       border: none;
       width:100%;
    }
    
    #corps h1
    {
       color: red;
       text-decoration: none;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       font-size: xx-large;
       font-weight: bold;
       text-align: center;
    }
    
    #corps h2
    {
       height: 30px;
       background-repeat: no-repeat;
       text-align: center;
       font-size: x-large;
       text-decoration: none;
       font-weight: bold;
       text-align: center;
    }
    #corps h3
    {
       height: 30px;
       background-repeat: no-repeat;
       text-align: center;
       font-size: 14px;
       font-weight: bold;
       text-decoration: none;
    }
    p
    {
    font-size: normal;
    font-family: "Comic Sans Ms",Arial,"Times New Roman", serif;
    font-weight: bold;
    width: 100%;
    margin: 10 px;
    }
    
    table
    {
    border-collapse: separate;
    empty-cells: hidden;
    border: none;
    width: 90%;
    margin-left:5%;
    position: center;
    margin-bottom: 25px;
    }
    
    caption
    {
    font-size:18px;
    font-weight:bold;
    }
    
    tr
    {
    height:auto;
    padding:2px;
    }
    
    td
    {
    border: 2px outset #0015f8;
    height: 50px;
    width: 150px;
    background-color: #ffe01f;
    vertical-align: middle;
    text-align:center;
    padding:2px;
    font-family: Arial,"Times New Roman", serif;
    font-weight: bold;
    font-size: 14px;
    empty-cells: hide;
    text-decoration: none;
    margin: 1px;
    }
    
    .clignotant
    {
    text-decoration:blink;
    }
    
    a
    {
    text-decoration:none;
    }
    
    #pied_de_page
    {
    background-color: #ffe01f;
    border: 8px;
    border-style: ridge;
    border-color: white;
    width:90%;
    height: 20px;
    color: green;
    font-style: italic;
    font-size: 16px;
    text-align: center;
    vertical-align: center;
    font-weight: bold;
    margin-top: 5px;
    
    position:absolute;
    margin-left: 5%;
    margin-bottom:1px;
    }
    


    bon j'ai tout mis, ça fait un peu long mais peut être que y'a une interaction toute pas bonne! Merci pour votre aide en tout cas!