28172 sujets

CSS et mise en forme, CSS3

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

<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>
réponse (d'un autre forum) :
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.
gomodo a écrit :
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.

Ce n'est pas tout à fait ça. La table ne s'adapte pas au conteneur, elle prend juste une hauteur qui va dépendre de son contenu, et des styles par défaut (en l'occurrence dans Firefox: un padding de 1px pour les éléments TD). Même chose pour les DIV utilisés ensuite. Ce qui m'échappe un peu c'est pourquoi la hauteur des cellules du premier tableau est de 23px quand dans les autres cas on a 22px, mais une telle différence de 1px sur la hauteur de ligne n'est pas surprenante, ça s'explique sans doute au niveau des arrondis fais par le navigateur dans le calcul de la hauteur de ligne.

Pour reprendre ta question de départ, je signale juste qu'en aucun cas il n'y a ici de débordement (sauf si on augmente la taille du texte). Au contraire, dans certains cas tu vois une ligne rouge car le contenu n'est pas assez haut (soit le contraire d'un débordement). Smiley cligne

Pour finir, des DIV positionnées en absolu, une technique de centrage horizontal très bricolée, des tableaux de mise en page... ce n'est pas très propre tout ça. Smiley ohwell
Florent V. a écrit :
La table ne s'adapte pas au conteneur, elle prend juste une hauteur qui va dépendre de son contenu, et des styles par défaut

Ah ?!
Sachant qu'il a spécifié dans son code table height="100%", je pensais naïvement que la table s'adapterait à la hauteur du conteneur.

C'était un jugement érroné alors ? Smiley biggol
Sujet clos
Aller à