Les coins ne passent pas sous IE6

J'ai ramené le probléme a cette page, le style est dans la page, vous n'avez qu'a regarder la source, c'est plus simple pour vous, plus simple que 50000 lignes.

Je ne voudrais pas mandier, mais presque !
Personne n'a pu m'aider sur tous les forums ou j'ai posté pour ce probléme, alsacreations, c'est ma derniére chance !

bonjour

tu indique une hauteur au div qui se trouve affiché entre tes 2 coins flottants.
Pour IE , l'effet est de provoqué le layout , ton div se trouve donc doté d'une particularité supplementaire et va occupé l'espace a l'ecran qui est réellement libre.

Il va se demarqué des flottants , qui par ailleurs induisent le "3 pixel jog" . Une marge laterales aux flottants .

Ton div alors ne s'affichera qu' a 3 pixel du bord des flottants , + la marge que tu donnes.

Tu peut eventuellement enlevé le height:23px;, ajouté un paragraphe (et te defaire du layout dans IE ) ou un titre pour recevoir le texte et dimensionné celui-ci.

tu peut reproduire le bug dans Firefox en donnant : overflow:hidden; a .haut , le resultat de comportement est trés similaire dans ce cas a ce qui se passe dans IE.

GC

Merci pr toutes ces info.
Entre temps, j'ai eut une idée, qui au début, m'as parus géniale:
mettre les coins a l'intérieur de haut:

<div id="centre">
	<div class="haut">
		<div class="hd"></div>
		<div class="hg"></div>
		Titre
	</div>

	<div class="contenu">
		Accueil
	</div>

	<div class="bas">
		<div class="bg"></div>
		<div class="bd"></div>
	</div>
</div>

et ca dans le css:

.hg, .hd, .bg, .bd,.haut, .bas, .cell_haut, .cell_bas{
	background-color:#35353F;
}
/*fin coins*/

/*classes contenu*/
.haut{
	width:100%;
	background-image: url('images/haut.gif');
	background-repeat: repeat-x;
	height:23px;
	font-family: Arial;
	font-weight:bold;
	text-align:center;
}

.bas{
	width:100%;
	background-image: url('images/bas.gif');
	background-repeat: repeat-x;
	height:14px;
}

Hop, je finis de coder tout ca, et la j'essai, super, les coins passent nickel avec ie6, ff et safari.

Par contre, et la franchement, ca c'est de la descente, pour je ne sais quelle raison, ie m'affiche le centre tout en bas :s

Voici un exemple
et le nouveau css associé (css6.css)

Je sais pas si je dois étre content, je résout un probléme, et j'en trouve un autre, toujours avec le même navigateur !

Bon j'ai trouvé ce que ie aimait pas:
il aime pas les width:100%; de .haut et .bas.
Quand je les supprime, il s'affiche bien, sauf que y'a une marge de 3px a gauche et a droite de .haut et de .bas, du coup je suis obligé d'ajouter un margin:0px 3px; a .contenu.

Et du coup, ben dans ff et safari ou tout passé bien avant, j'ai contenu qui est moins large que le haut et les bas !



Donc je crois avoir trouvé LA solution: les commentaires conditionnels.
C'est bourrin mais bon, je vois que ca.

Et surtout, si vous avez une autre solution a me proposer, allez y (même quitte a faire un gros up de 1 an ) ca peut toujours servir.

IE est une espéce a éradiquer, d'ailleurs parfois je me demande si les gens de redmond qui bossent dessus comprennent leur code source.
Nan mais je comprend mieux le chinois que ie interpréte le css !
Modifié par Galdon (12 Nov 2007 - 22:33)