[résolu] Firefox et IE5/mac, float qui sort du flux

Bonsoir,

Non le titre n'est pas une contrepetrie. Avant de complètement changer d'angle d'attaque je voudrais savoir si il y a une solution pour que Firefox ne sorte pas mes divs imbriqués du flux (à cause d'un float:left)

Voici les exemples à visionner avec FireFox et IE pour voir la différence :

Avec le float:left activé
sans le Float

Sachant que bien sûr je souhaite à la fois les float:left et que le conteneur reste un conteneur…

Le code css :

* {
	margin:0;
	padding:0;
	border:0;
}

html, body
{
	text-align:center;
	background: url(img/BGcolor.png);
}

/*-------------------------*/
/* Début Structure de base */
/*-------------------------*/

#entete {
	height:60px;
	width:100%;
	background:url(img/BGentete.gif) no-repeat center 43px;
}

#conteneurBG {
	width:100%;
	background:url(img/BGombre.gif) repeat-y center;
}

#pied {
	clear:left;
	height:60px;
	width:100%;
	background:url(img/BGpied.gif) no-repeat center 0;
}

/*-----------------------*/
/* Fin Structure de base */
/*-----------------------*/

#conteneur {
	width:700px;
	margin:0 auto 0 auto;
	background-color:#fff;
}

#actu {
//	float:left;
	width:115px;
}

#frame {
//	float:left;
	width:565px;
}

.marge {
//	float:left;
	width:10px;
	background-color:yellow; // juste pour mettre la limite en évidence
}

et le code xhtml :

<div id="entete"></div>
<div id="conteneurBG">
	<div id="conteneur">
			<div id="actu">actu</div>
			<div class="marge">m</div>
			<div id="frame">texte</div>
	</div>
</div>
<div id="pied"></div>

Modifié par zzzazzz (09 Aug 2005 - 07:55)

Bonsoir,

Comme tu le sais, toute question commence par un petit tour dans la FAQ du forum, qui t'aurait fourni rapidement la réponse (overflow auto sur le conteneur)
Modifié par Laurent Denis (08 Aug 2005 - 19:46)

Damned c'est parfait, je suis pourtant passé devant (la FAQ) ce midi. Je savais bien qu'un deuxième café se faisait sentir. Merci bcp

(Et bien maintenant c'est IE mac qui ne centre plus mon conteneur, vite la FAQ)

Il semblerait que IE5 mac ne comprenne pas overflow, du coup le div conteneur se retrouve complètement à gauche… Je crois que le hack s'impose. Si je trouve je le post ici…

Voilà je crois que j'ai trouvé la formule magique pour rendre le conteneur centré et compatible IE/mac.

Testé et validé sur :
IE 5.2/mac
IE 5.5/Win
IE 6.0/Win
FF 1.04/Mac
Safari 2.0

Le CSS :

#iemac {
	width:700px;    /* On sépare la largeur (obligatoire) */
	margin:0 auto; /* et les marges du conteneur */
	background-color:#fff; /* Mettre le background ici, mieux compris par IE/Win */
}

#conteneur {
	text-align:left;
	overflow:auto; /* L'overflow vient se mettre ici */
}

Côté xhtml :

<div id="iemac">
<div id="conteneur">
  <!--Maintenant on peut mettre ici des divs avec Float sans problème-->
</div>	
</div>

Je vais pouvoir passer à autre chose. Pour finir, voici un lien très utile pour les problèmes liés à IE/mac

Salut pour ma part les problèmes de débordement de bloc qui étaient différents selon FireFox, Safari et IE MAc 5.2 ont été résolu en 2 étapes.

lien vers le site résolu
Le problème venait d'un conflt dans le Footer entre le texte et les liens vers les petites bannieres W3C.

1-FireFox faisait déborder mes 2 vignettes gif. Avac Safari et IE mac par de problème.
Résolution :
-Dans CSS j'utilise Float:right pour la bannière W3C
-dans le XHTML il m'a suffit de positionner le code concernant les bannières AVANT le texte "propulsé par ..." (pourquoi ??? j'en sais rien !)

2-A ce moment tout s'affiche normalement dans Safari et FireFox mais IEmac sort le texte "propulsé ..." du bloc.
Pour corriger cela il m'a suffit de remplacer une balise <p id="footer"> par un <div id="footer">

C'est un peu confus mais si cela peu aider.

Ok, juste je rappelle que le problème provenait d'un overflow dans le conteneur qui avait donc pour effet d'annuler le float, sous IE5.2/mac.