Fusion de cellules + IE + CSS

Fermé
Euskamicha Messages postés 75 Date d'inscription mercredi 10 octobre 2007 Statut Membre Dernière intervention 15 février 2010 - 20 févr. 2008 à 09:02
Euskamicha Messages postés 75 Date d'inscription mercredi 10 octobre 2007 Statut Membre Dernière intervention 15 février 2010 - 20 févr. 2008 à 11:19
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 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
20 févr. 2008 à 10:57
Heu... ça fonctionne très bien sous IE. Montre nous ton code.
0
Euskamicha Messages postés 75 Date d'inscription mercredi 10 octobre 2007 Statut Membre Dernière intervention 15 février 2010
20 févr. 2008 à 11:19
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