Firefox : overflow dans un div

**gomodo** · 13/01/2009, 14h51

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 :

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
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>

**Macmillenium** · 13/01/2009, 15h26

Bonjour,

Je ne vois pas trop quel sorte de débordement

Ton tableau ne prend pas 100% de son conteneur ?

**gomodo** · 13/01/2009, 15h29

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

**gomodo** · 13/01/2009, 15h32

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).

**c_s_s** · 13/01/2009, 15h33

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 xhtml :

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

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

**Macmillenium** · 13/01/2009, 15h40

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

Code CSS :

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

.menu table { height:25px; }

**gomodo** · 13/01/2009, 15h44

merci, ton explication est très claire.

Firefox : overflow dans un div

CSS

Vue hybride

Discussions similaires

Partager

Partager