Fusion de cellules + IE + CSS

Euskamicha Messages postés 75 Statut Membre -  
Euskamicha Messages postés 75 Statut Membre -
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!
A voir également:

2 réponses

Enax Messages postés 204 Statut Membre 145
 
Heu... ça fonctionne très bien sous IE. Montre nous ton code.
0
Euskamicha Messages postés 75 Statut Membre
 
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!
0