28172 sujets

CSS et mise en forme, CSS3

[Résolu] Table height 100% IE6

Bonjour à tous,

Le sujet à déjà été traité bien souvent et je m'y suis déjà plongé pour trouver ma solution mais rien...
Je n'arrive pas à afficher un table sur une hauteur de 100% sous IE6. Je pense qu'il peut aussi s'agir d'un problème de DOCTYPE mais je ne peux pas en changer... J'ai déjà fait des dizaines de tests et je ne sais plus quoi faire...

Ce serait super si qqun pouvait me mettre sur la voie...

Voici mon code
INDEX.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
	<title>TEST</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="agenda.css" type="text/css">
</head>
<body>
	<table id="content">
		<tr>
			<td id="right_content">
					<table id="agenda">
						<thead>
							<tr>        	
								<td>Dim</td>        	
								<td>Lun</td>        	
								<td>Mar</td>        	
								<td>Mer</td>        	
								<td>Jeu</td>        	
								<td>Ven</td>        	
								<td>Sam</td>		
							</tr>
						</thead>
						<tbody>		
							<tr>			
								<td class="day_off" id="d"><span class="date"></span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_off" id="d"><span class="date"></span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d1"><span class="date">1</span><div class="c_day"><ul><li class="event" id="event2">events1 </li><li class="event" id="event3">events1 </li><li class="event" id="event6">events1 </li><li class="event" id="event1">Objet de l'évènement</li></ul></div></td>
										
								<td class="day_on" id="d2"><span class="date">2</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d3"><span class="date">3</span><div class="c_day"><ul><li class="event" id="event4">PHP - Introduction</li></ul></div></td>
										
								<td class="day_on" id="d4"><span class="date">4</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d5"><span class="date">5</span><div class="c_day"><ul></ul></div></td>
							</tr>
							<tr>			
								<td class="day_on" id="d6"><span class="date">6</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d7"><span class="date">7</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d8"><span class="date">8</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d9"><span class="date">9</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d10"><span class="date">10</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d11"><span class="date">11</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d12"><span class="date">12</span><div class="c_day"><ul></ul></div></td>
							</tr>
							<tr>			
								<td class="day_on" id="d13"><span class="date">13</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d14"><span class="date">14</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d15"><span class="date">15</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d16"><span class="date">16</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d17"><span class="date">17</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d18"><span class="date">18</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d19"><span class="date">19</span><div class="c_day"><ul></ul></div></td>
							</tr>
							<tr>			
								<td class="day_on" id="d20"><span class="date">20</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d21"><span class="date">21</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d22"><span class="date">22</span><div class="c_day"><ul><li class="event" id="event5">nouvel évènement formation pour tous et toutes</li></ul></div></td>
										
								<td class="day_on" id="d23"><span class="date">23</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d24"><span class="date">24</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d25"><span class="date">25</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d26"><span class="date">26</span><div class="c_day"><ul></ul></div></td>
							</tr>
							<tr>			
								<td class="day_on" id="d27"><span class="date">27</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d28"><span class="date">28</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d29"><span class="date">29</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d30"><span class="date">30</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_on" id="d31"><span class="date">31</span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_off" id="d"><span class="date"></span><div class="c_day"><ul></ul></div></td>
										
								<td class="day_off" id="d"><span class="date"></span><div class="c_day"><ul></ul></div></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>


agenda.css

/* --- Styles page --- */
html, body {
	height: 100%;
}
#content{
	width: 100%;
	height: 95%;
	border: 1px solid #0F0; 
}
#right_content{
	vertical-align: top;
	border: 1px solid #F00;
}
/* --- Styles agenda --- */
#agenda{
	width: 100%;
	height: 100%;
	border-left: 1px solid #DDD;
	background-color: #F0F8FF;
}
#agenda thead {
	background-color: #ADD8E6;
	text-align: center;
	height: 20px;
}
#agenda tbody{
	vertical-align: top;
	height: 96%;
}
#agenda tbody tr{
}
#agenda tbody tr td{
	width: 13%;
	height: 15%;
}
.day_on{
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
.day_off{
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	background-color: #E0E0E0;
}
.date{
	float:right;
}

Modifié par defcon_suny (29 Jul 2008 - 16:02)
Hello et bienvenue Smiley smile

a écrit :
Je pense qu'il peut aussi s'agir d'un problème de DOCTYPE
Non, ton doctype est correct.

Normalement :
html, body {
height:100%; }

div#content {
min-height:100%; }

div#content { /* Seulement pour IE6, via commentaires conditionnels */
height:100%; }
Ça suffit aux navigateurs pour que le conteneur s'adapte à la hauteur totale, du moins pour une <div>.

A quoi sert le tableau dans le tableau (#agenda dans #content) et surtout la ligne / colonne que tu crées simplement pour faire l'imbrication ?

Une page en ligne pourrait aider Smiley cligne

Au passage ton code, bien que propre et bien organisé, génère 48 erreurs à la validation Smiley ohwell
Merci pour ta réponse Smiley cligne

Je ne peux malheureusement pas mettre en ligne ces 2 pages... mais elles n'ont pas d'autres dépendances et peuvent donc être "copiées/collées" dans des fichiers locaux.

Il s'agit d'une version simplifiée des pages réelles... juste pour localiser le problème et retirer le superflux de la cause réelle de mes soucis.

C'est pourquoi l'imbrication des 2 tableaux a toute sa raison d'être même si elle apparaît ici totalement dérisoire.

Les erreurs de validations sont en majeur partie dûes à un id non unique de mes td's... mais sera résolu avant la mise en production Smiley cligne

"je suis un adepte du grand W3C" Smiley langue

Vois-tu autre chose qui pourrait m'aider?
Modifié par defcon_suny (29 Jul 2008 - 14:41)
Si tu vires tout le contenu du <table> principal, en ne conservant que seule ligne et une seule colonne, est-ce que ça s'étire correctement ?
<table id="content">
     <tr>
          <td>Test</td>
     </tr>
</table>
En fait dans le code CSS

#content{
	width: 100%;
	height: 95%;
	border: 1px solid #0F0; 
}
#right_content{
	vertical-align: top;
	border: 1px solid #F00;
}

J'ai placé un border vert pour #content et un rouge pour #right_content. Les deux font bien le tour de ma page... seul le table #agenda se content de couvrir la surface de son contenu...

étrange hein?! ou alors je suis trop impliqué pour voir ce qui saute aux yeux Smiley biggol 
#right_content{
vertical-align: top;
border: 1px solid #F00;
[b][#red]height:100%;[/#][/b] }
Et ça devrait aller Smiley cligne

Je viens de tester le code ci-dessous qui fonctionne correctement :
HTML

<table id="conteneur">
     <tr>
          <td id="hauteur_max">
               <table id="test">
                    <tr>
                         <td>Test</td>
                    </tr>
               </table>
          </td>
     </tr>
</table>

********************

CSS

html, body {
height:100%; }

table#conteneur {
border:10px solid blue;
height:100%; }

td#hauteur_max {
height:100%; }

table#test {
height:100%;
border:10px solid red; }

Modifié par BeliG (29 Jul 2008 - 15:29)
Ton conseil est le bon mais le résultat ne donne pas celui attendu... j'ai également retiré la definition de la hauteur au niveau du tbody!!!

Tout est Nickel! Grand merci à toi... Smiley ravi
Sujet clos
Aller à