Firefox : overflow dans un div

Bonjour à tous.

Mon problème est un petit débordement. J'ai partiellement résolu le problème avec un overflow: hidden.. mais le problème persiste avec Firefox (j'ai la 3.0.5).

Une image plus efficace qu'un long discours : lien avec exemple

Je voudrait ne plus avoir de débordement quand je rajoute un div (dans l'exemple il est coloré en vert).

Le premier bloc (menu_img) : ne pose pas de problème.
Le deuxième bloc (menu_img2) : J'ajoute un div supplémentaire-> débordement.
Le troisième bloc (menu_img3) : le "overflow: hidden" n'y change rien pour ff.

voila le code (head et body) :

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	background-color: #DFDFFF;
}
#menu_img{
	position:absolute;
	z-index:2;
	left: 434px;
	top: 100px;
	width: 420px;
	height: 25px;
	visibility: visible;
	overflow: visible;
	vertical-align: middle;
	text-align: left;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #FF0000;
	cursor: pointer;
}
#menu_img2{
	position:absolute;
	z-index:2;
	left: 434px;
	top: 130px;
	width: 420px;
	height: 25px;
	visibility: visible;
	overflow: visible;
	vertical-align: middle;
	text-align: left;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #FF0000;
	cursor: pointer;
}
#menu_img3{
	position:absolute;
	z-index:2;
	left: 434px;
	top: 160px;
	width: 420px;
	height: 25px;
	visibility: visible;
	overflow: hidden;
	vertical-align: middle;
	text-align: left;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #FF0000;
	cursor: pointer;
}
-->
</style>
</head>
<body >
<div id="menu_img">
	<table height="100%" border="0" cellspacing="0" bgcolor="#00FFFF">
	  <tr><td><img src="image22x22.png" width="22" height="22" /></td>
	  <td>tableau bleu dans div rouge (sans sous-div)</td>
	 </tr></table>
</div>
 
<div id="menu_img2">
  <div style="background-color: #00FF00;"	>
	<table height="100%" border="0" cellspacing="0" bgcolor="#00FFFF">
	  <tr><td><img src="image22x22.png" width="22" height="22" /></td>
	  <td>Diff&eacute;rence avec un sous-div (vert) en plus</td>
	 </tr></table>
</div></div>
 
<div id="menu_img3">
  <div style="background-color: #00FF00;">
	<table height="100%" border="0" cellspacing="0" bgcolor="#00FFFF">
	  <tr><td><img src="image22x22.png" width="22" height="22" /></td>
	  <td>tricher, et faire un overflow: hidden ?.. ne marche pas avec ff.</td>
	 </tr></table>
</div></div>
 
</body>

Bonjour,

Je ne vois pas trop quel sorte de débordement :roll:
Ton tableau ne prend pas 100% de son conteneur ?

Dans le lien en exemple, avec fff, on voit une fine bande rouge.

peut être ce n'est pas un débordement ?
En tout cas le tableau ne rempli pas tout le div principal (alors que l'on a du 100% en hauteur).

Bonjour,

Dans le premier cas, la hauteur de la table s'adapte au conteneur (menu_img) qui a une hauteur de 25px, donc la table fait 25px de haut.

Dans les deux autres cas, la table s'adapte au conteneur div qui n'a pas de hauteur, ce div prenant la hauteur relative au contenu texte (soit 24px).
Logiquement, il reste 1px sous la table puisque les blocs menu_img2 et menu_img3 ont une hauteur fixée à 25px.

Il suffit de ne pas définir de hauteur pour tes blocs menu_img, menu_img2 ou menu_img3.

Ou alors, il faut que tu définisses aussi une hauteur pour le div qui contient la table dans les deux derniers cas.

Code:

<div style="background-color: #00FF00;height:25px;">

Ou sinon ajouter une classe aux menus et appliquer la hauteur directement sur le tableau.

Code:

.menu table { height:25px; }

merci, ton explication est très claire.