[résolu] Adaptation d'un CSS à IE (problème avec le float)

Salut,

Je suis en train de m'arracher les cheveux sur mon CSS... j'arrive pas à l'adapter à IE, le float ne flotte pas... Je dirais même qu'il coule

Après recherches, j'ai entendu parler des fameux "2-3 pixels" de IE... Mais j'ai beau avoir agrandi 2-3 trucs, ça veut pas se positionner... J'espère que l'un d'entre vous pourra m'aider

==> L'adresse <==
Modifié par XavWRC (24 Apr 2006 - 11:59)

À vue de nez, ça ne serait pas lié non pas au « 3 pixel jog » mais plutôt à un problème de HasLayout qui fait que les blocs proches du flottant ne peuvent plus se glisser dessous comme on voudrait qu'ils le fassent.

http://www.test.blog-and-blues.org/haslayout/tests/float4.html
Cf la deuxième copie d'écran sur cette page.

EDIT:

#page #menu
{
	width:100%;
	height:110px;
	margin-top:125px;
	position:relative;
}

– La largeur fixe en pourcentage est inutile et a le défaut de conférer le layout au bloc du menu, qui fait qu'il ne peut plus passer en dessous du flottant.
– La hauteur fixe n'est pas inutile mais pose le même problème. Je ne sais pas si le problème se pose si on se contente de donner une hauteur fixe aux #page #menu li.
– La position relative ne sert à rien, il me semble. Autant la virer, car elle peut provoquer des réactions inattendues et fausser les données du problème…
Modifié par mpop (24 Apr 2006 - 00:10)

Salut,
IL y a déjà un beau cas de fusion des marges verticales, par rapport au margin-top 125 de #menu. C'est pour cela que tu appliques un margin-top négatif à #cadre qui est en float. Mais comme IE ne fusionne pas les marges verticales, ça fait forcément une bonne différence.
Ajoute par exemple padding:1px à #page et tu constateras la différence.
Supprime 100% de #menu, inutile et qui pose problème.
Modifié par Alan (24 Apr 2006 - 01:29)

Alan a écrit :
IL y a déjà un beau cas de fusion des marges verticales, par rapport au margin-top 125 de #menu. C'est pour cela que tu appliques un margin-top négatif à #cadre qui est en float. Mais comme IE ne fusionne pas les marges verticales, ça fait forcément une bonne différence.
Ajoute par exemple padding:1px à #page et tu constateras la différence.

Ah ah, bien vu !

Merci beaucoup à tous les 2. Déjà, en enlevant le 100% de menu, ça a fait fonctionner le float sous IE.

Maintenant, j'ai encore pas mal de problèmes à régler pour le positionnment de mon cadre, mais je vais essayer de les résoudre seul en local pour commencer. Si je bloque trop, je vous redemanderai de l'aide, mais je vais essayer de trouver tout seul Et je vous tiendrai au courant si je réussit !

Et voila, grace à vos conseils, j'ai réussi à adapter mon CSS à Firefox, IE et Opera, les 3 que j'ai sur mon pc. Merci beaucoup. Si quelqu'un sous Mac peut tester pour moi avec Safari par exemple, je le remercie d'avance

test sous firefox et safari /mac ...
c'est ok, même visuel...

Merci beaucoup