[RESOLU] pas d'overflow sur un div flottant : IE6 étire la div...

Résolu, voir mon dernier post , grâce a ces liens :

http://www.castelosnoar.com/studies/aboutCSS/IE_bugs_hacks/overflow_visible.htm

http://archivist.incutio.com/viewlist/css-discuss/61202

merci a tous !
----------------------------------

Bonjour, je vous expose brièvement mon problème :

J'ai un div parent qui contient un div pour le menu de navigation, et un div pour le contenu, ces deux étant placés en float:left dans le parent (avec un clear:both à la fin du parent, pour garder le footer en bas).

Lorsque mon div de contenu dépasse sa taille prévue à cause par exemple d'une image trop grosse, je fais face à deux comportements selon les browsers :

- IE7 & Firefox :
Mon div contenu trop large reste en place à droite du menu, et déborde du div parent. C'est le comportement que je recherche, je crois si j'ai bien compris que ça correspond au comportement par défaut (overflow visible).

- IE6 :
Mon div contenu trop large ne peut pas déborder de son parent, il se retrouve donc à flotter SOUS le menu de gauche, puisque ces 2 éléments flottants ne tiennent pas côte à côte en largeur. C'est comme si le div de contenu ne pouvait pas utiliser l'overflow de son parent. J'ai l'intuition que cela est dû au positionnement flottant, car si je place le bloc en absolu, l'overflow marche bien et le bloc dépasse de son parent. Hélas je ne peux pas utiliser l'absolu à cause du footer qui va remonter ...


Mes questions :
- au vu de ces données (bloc flottants trop larges), quel comportement est normal, celui de IE6 ou de firefox/IE7 ?
- Et surtout comment forcer IE6 à autoriser l'overflow du bloc parent prioritairement au fait de mettre les flottants l'un au dessus de l'autre si ils sont trop larges ?

Merci d'avance, et désolé si le sujet à déjà été résolu, j'ai lu pas mal de topics à ce propos, dont un tout frais qui doit encore trainer sur cette page de forum, mais je n'ai pas trouvé de solution au problème
Modifié par philipPF28 (19 Sep 2007 - 15:39)

Bonjour,
cela peut être dû à un bug d'IE qui double les marges des flottant dans
certaines conditions mais sans le code correspondant on ne peut pas
analyser ton problème.
Modifié par Hermann (18 Sep 2007 - 19:05)

Merci pour ta réponse, je n'ai pas résolu le problème mais je pense que je l'ai un peu affiné. Voici un exemple de code qui pose problème :

<div id="container">

	<div id="menu">
		<ul>
		<li>sous menu 1</li>
		<li>sous menu 2</li>
		<li>sous menu 3</li>	
		</ul>
	</div>

	<div id="contenu">
		Une image trop large pour le bloc contenu :<br><br>
		<img src="image.gif" alt="" width="400" height="55" border="1">
	</div>

	<div style="clear:both;"></div>
</div>

La div container contient le menu et le contenu qui sont tous deux en float left. Voici la CSS associée :

#container
{
width: 600px;
background-color: gray;
border: 1px solid black;
padding: 5px;
}

#menu
{
	width: 200px;
	background-color: red;
	border: 1px solid black;
	float: left;
	padding: 5px;
}

#contenu
{
	width: 300px;
	background-color: yellow;
	border: 1px solid black;
	float: left;
	padding: 5px;
}

Les points importants :

- dans le CSS, les largeurs sont suffisament petites pour que le menu et le contenu apparaissent côte à côte. Si ce n'était pas le cas, firefox et IE6 auraient un comportement similaire, à savoir les blocs l'un en dessous de l'autre (logique car ils auraient été définis trop larges dans le CSS).
- C'est donc l'image image.gif, qui fait 400px de large alors que le bloc contenu n'en fait que 300, qui déforme le bloc contenu, et provoque la différence entre IE6 & firefox. Voici le résultat en images :



http://img214.imageshack.us/img214/8588/overie6kh3.jpg


http://img229.imageshack.us/img229/1083/overfirefoxnc7.jpg



Comme vous le voyez, sous FF, le bloc contenu n'est pas agrandi, c'est simplement l'image trop grande qui déborde ! Du coup le bloc contenu reste bien à droite du menu (le comportement que je recherche ^^)

Par contre sous IE, il n'y a pas d'overflow, l'image agrandit le bloc a 400px, ce qui fait qu'il ne tiens plus cote à cote avec le menu, et passe en dessous (ce que je ne veux pas)...

Voilou voilou, merci d'avance de votre aide !
Modifié par philipPF28 (19 Sep 2007 - 14:15)

Salut,

Je ne sais pas quel est le comportement normal, mais une petite voix sournoise me crie dans l'oreille "c'est celui de Firefox !". Pas le courage de vérifier

Il me semble que tu utilises un flottant de trop. Il suffirait de mettre uniquement le menu en float: left pour arriver au même résultat, et ça résoudrait probablement ton problème ...

Par exemple :

#container {
   overflow: auto ;
   }
#menu {
   float: left;
   width: 200px ;
   }
#contenu {
   margin-left: 200px ;
}

Bon bah en fait c'est juste la gestion de l'overflow sous ie6 qui me pose problème en fait.

- d'un coté IE6 agrandit le bloc si l'image contenue est trop grande
- de l'autre, firefox fait dépasser l'image du bloc sans l'agrandir

Fixer l'overflow du div à visible ne résoud rien (de toute facon c'est la valeur par défaut).

Je vais chercher plus précisément de ce côté la sur le forum, si d'ici là vous avez une réponse pour moi je vous remercie d'avance

EDIT : merci Thomas je suis en train d'explorer ta piste

EDIT 2 : merci pour l'astuce le float left est en effet assez inutile vu que ma partie gauche est de taille fixe. Par contre ça ne résoud pas le problème, l'overflow est vraiment géré différement entre Firefox et IE, et c'est ça qui fait que mes blocs ne peuvent pas être côte à côte. J'ai 2 solutions a priori :

- faire en sorte que IE n'agrandisse pas le bloc si l'image est trop grosse, mais la fasse dépasser comme le fais firefox
- forcer IE a positionner les blocs cote a cote (avec par exemple un positionnement absolu, mais ca me gene un peu à cause du footer qui n'est pas représenté ici)
Modifié par philipPF28 (19 Sep 2007 - 14:42)

Voilà un lien qui n'est pas fait pour me rassurer :

http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B

Apparement IE étire bien les boites au lieu de laisser le contenu en dépasser... monde cruel

philipPF28 a écrit :
Apparement IE étire bien les boites au lieu de laisser le contenu en dépasser...

IE6, oui. IE7 corrige ce bug, par contre.

Une idée comme ça en passant: via un commentaire conditionnel pour IE6 et inférieurs, on devrait pouvoir faire ceci:

#bloctropcourt {
	overflow-x: auto;
}

Florent V. a écrit :

IE6, oui. IE7 corrige ce bug, par contre.

Une idée comme ça en passant: via un commentaire conditionnel pour IE6 et inférieurs, on devrait pouvoir faire ceci:

#bloctropcourt {
	overflow-x: auto;
}

En effet, voici un lien qui confirme (et qui m'achève ) :

http://www.quirksmode.org/css/overflow.html

Ta solution est pas mal, j'avais déjà implémenté la technique avec overflow et non overflow-x, et du coup j'avais un énooorme ascenseur vertical inutile et moche qui n'aurait surement pas plu au client. Le seul soucis que j'ai avec cette solution, c'est que sur le site dont je m'occupe, les dimensions sont vraiment calculées juste, bref, sur un div contenu de 500px de large, on va occuper peut-être 499pixels... Et le soucis avec overflow auto, c'est que ce gros malin d'IE6 à l'air d'inclure la taille des ascenceurs dans le calcul... Donc même si il n'y a pas besoin, il ajoutera l'ascenceur pour permettre seulement de scroller sur environ 10px....

Mais bon ca fera toujours une solution de secours si je ne trouve rien pour forcer IE6 à avoir le bon comportement (et a mon avis je vais rien trouver )

Je crois que j'ai parlé trop vite... voici 3 workarounds possible apparement pour le problème d'overflow visible de IE6... je vais étudier chacune de ces solutions (qui n'ont pas l'air très propre vues de loin, sachant que je dois faire un site accessible, c'est pas gagné )... je vous tiens au courant !

http://www.castelosnoar.com/studies/aboutCSS/IE_bugs_hacks/overflow_visible.htm

http://archivist.incutio.com/viewlist/css-discuss/61202

EDIT : il y a en fait 2 solutions. Celle de gauche avec le margin-right négatif obligeant IE a faire dépasser le contenu du bloc est pas mauvaise, mais pour une obscure raison elle ne marche pas sur mon site. A noter que dans son exemple, l'auteur savait de combien le contenu allait dépasser (largeur du contenu = 150% du conteneur), et a donc utilisé cette valeur pour la correction par le margin-right (-50%)... pour ceux qui ne savent pas a l'avance de combien le contenu va dépasser, j'ai testé, il suffit de mettre une très grande valeur au margin-right (genre -10000px), IE6 ajustera lui même comme il faut (me demandez pas comment, c'est magique ).

J'ai personnelement préféré la solution 2, celle ou :
- le conteneur utilise overflow:hidden
- le contenu utilise position:relative

Je ne vois absolument aucune logique dans cette solution, mais elle marche bien A utiliser avec les commentaires conditionnels pour IE6 bien sur, pour ne pas ruiner la mise en page sur FF/IE7...
Modifié par philipPF28 (19 Sep 2007 - 15:37)

Je viens de trouver par hasard ce sujet. Je voulais trouver une solution disons sans "hack" complexe et j'ai finalement trouvé. J'ai réussi à résoudre le problème en entourant les éléments positionnés en flottant et avec un overflow par un div avec les lignes css suivantes :

{
margin: 0;
padding: 0;
width: 100%;
}

J'ai pas encore mis en ligne le thème que je suis en train de réaliser pour mon site perso, mais dès que j'ai envoyé ça, je vous préviens.