Discussion :

[Neroptik]

Bonjour a tous,
Je viens de me heurter a un petit probleme que je ne n'arive pas a résoudre...
J'ai un Tableau qui fonctionne a merveille sous FF mais pas comme je le veux sous IE.

En fait j'ai deux colones et la deuxieme colone comporte deux ligne.
Dans le CSS je precise que la hauteur de la première ligne est de 53 pixels, parametre qui est pris en compte par FF mais pas par IE qui met 50 % 50 % alors que la première ligne devrait faire 53 pixels et la deuxieme doit avoir une hauteur aleatoire (extensible).
Donc j'aurais voulu savoir s'il y a un moyen de forcer IE a ajuster la hauteur d'une cellule a une valeur precise dans mon cas ?
Biensu d'habitude IE prend en compte les heuteurs definies mais la je pense que c'est a cause de la colone adjacente que la decoupe des ligne se fait comme ca.
Je ne sais plus comment faire.
Merci d'avance

Voici mon code :

COLONE 1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<tr> 
  		<th rowspan="2" width="190px" height="auto" valign="top">
			<div class="m1">
				<div class="titremenu">Menu 01</div>
			</div>			
			<div class="m2">
				<h1 class="bouton">Contenu du Menu 01</h1><br />
				<h1 class="bouton">Bouton 01</h1><br />
				<h1 class="bouton">Bouton 02</h1><br />
				<h1 class="bouton">Bouton 03</h1><br />
				<h1 class="bouton">Bouton 04</h1><br />
				<h1 class="bouton">Bouton 05</h1>
			</div>
			<div class="m3">
			</div>
			<div class="m1">
				<div class="titremenu">Menu 02</div>
			</div>
			<div class="m2">
				<h1 class="bouton">Contenu du Menu 02</h1><br />
				<h1 class="bouton">Bouton 01</h1><br />
				<h1 class="bouton">Bouton 02</h1><br />
				<h1 class="bouton">Bouton 03</h1><br />
				<h1 class="bouton">Bouton 04</h1><br />
				<h1 class="bouton">Bouton 05</h1>
			</div>
			<div class="m3">
			</div>
		</th>

DEBUT DE LA LIGNE 1 COLONE 2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
	<td class="zonemenu" valign="top">
			<div class="menu">
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />
				<img src="bouton.png" width="105" height="32" />			
			</div>
  	  </td>
 	</tr>

DEBUT DE LA LIGNE 2 COLONE 2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	<tr>
		<td class="middle" valign="top">
			<div class="pagetop">
			</div>
			<div class="pagemiddle">
				<div class="text">
					Texte....
				</div>
			</div>
			<div class="pagebottom">
			</div>
		</td>FIN DE LA LIGNE COLONE 2
	</tr>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.menu
{
width:783px;
height:25px;
text-align:left;
text-indent:9px;
}
 
.zonemenu
{
height:53px;
vertical-align:middle;
}

[roudoudouduo]

Je ne connais pas la solution du problème mais je pense que le celui-ci vient de la différence de gestion des cellules sous IE et sous les autres navigateurs :

Par exemple :
Une cellule avec les propriétés suivantes <td style="width: 100px; border: 5; padding: 10">...</td> faira sous IE :
100 px (il considere que le padding et le border sont inclus dans la taille.

sous firefox (et autres)
100 + 2*5 + 2*10 = 130 pixels. Ce qui fait une reel difference.

http://w3qc.org/docs/dix_trucs_css.html

Regarde l'astuce numéro 7 de cette page elle t'aidera peut-être.

[Neroptik]

Merci pour ton aide mais je n'y parviens tjs pas

Je le repete kan je met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td class="zonemenu" valign="top" height="53">

Ca ne marche pas plus :S

[Neroptik]

J'ai remarquer que kan je mettait du contenu dans la page la cellule du menu se reajuste jusqu'a adopter sa bonne taille. mais il faudrait que se soit la meme avec une page vide.

[Neroptik]

Bon j'ai trouver un moyen pour palier a ce probleme mais je n'ai pas encore la solution ...
merci kan meme

[wahou85]

C'est vrai que quand on met du contenu en bas à droite ça s'arrange.

Bizarre ça...

Sinon tu peux essayer de faire un truc comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
	<tr>
		<td>
		<!-- Tableau avec ton menu -->
		</td>
		<td>
			<table>
				<tr>
					<td>
					<!-- Zonemenu -->
					</td>
				</tr>
				<tr>
					<td>
					<!-- Contenu de tapage -->
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Ou bien des div correctement agencées c'est ce qu'il y a de mieux je pense

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="page" style="width:800px; border:1px solid #000000;">
	<div id="menu" style="float:left;width=120px;">le menu !</div>
	<div id="wrapper" style="float:right;width=650px;border-left:1px solid #000000;">
		<div id="top" style="height:53px;border-bottom:1px solid #000000;">tes boutons</div>
		<div style="clear:clear;" />
		<div id="content">ton contenu</div>
	</div>
</div>