[Résolu] Incompatibilité sous firefox (div qui remonte)

Bonsoir,

J'ai un petit problème sous firefox, pour une fois que c'est pas IE ...

Voila ma maquette avec des couleurs pour mieux distinguer les parties : ****

Ce qui se passe sous firefox c'est que le footer remonte =/ mais pas sous IE

J'espere obtenir une aide et je vous en remercie d'avance.

PS : si vous pouviez verifier le code si il est "propre" et conforme aux "règles" ca serait génial.
Modifié par Snoopy17 (10 Mar 2007 - 11:19)

Salut,

Je n'ai pas regardé à la loupe tout ton code, mais je pense que c'est Firefox qui l'interprète correctement. Toute ta partie de droite est en flottant, ton footer se met donc sous le bloc qui le précède.

Essaie ainsi :

#footer {
[b]clear: both;[/b]
margin-top:20px;
width:765px;
height:18px;
background-color:#f4cc13;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
text-align:center;
padding-top:5px;
margin-left:10px;
}

Merci boulaneige ca marche

J'aimerais juste plus d'explications sur cette balise css car je déteste utiliser quelque chose sans le comprendre.

Merci d'avance

Je ne me suis pas lancée dans des explications pour éviter de dire des bétises

Regarde ceci

Ah super merci c'est plus clair la

Je garde le lien en favoris et je mes [Résolu]

EDIT : un nouveau bug est apparu sous firefox avec le footer la margin-top:20px; n'est pas prit en compte alors que sur IE oui !

Merci d'avance
Modifié par Snoopy17 (18 Dec 2005 - 22:59)

"Clear:both" permet de passer à la ligne après un élément flottant.
Dans ton cas l'élément flottant est le menu. Le footer vient donc se placer en dessous.

Cependant ton div dans lequel est ton texte (div de droite) est plus court que ton menu. La marge s'applique bien, mais l'espace entre la fin de ton texte et le footer est supérieur à la marge. Ce qui te donne l'impression que la marge n'est pas appliquée.

Essaie avec une marge plus grande et tu verras où est ton problème.

Important : ne pas oublier qu'un élément flottant est en déhors du flux naturel de la page !
Modifié par EricLB (19 Dec 2005 - 00:04)

Bonjour,

Si j'ai bien compris le footer se place par rapport au #bloc ?
Et je comprends pas pourquoi tu insistes sur le fait que un élément flottant n'est pas dans le flux naturel

Que veux-tu dire par notion de "flux" (je débute en css pour le moment)

De plus je n'arrive pas à régler mon problème

Merci de votre aide

Snoopy17 a écrit :
Que veux-tu dire par notion de "flux" (je débute en css pour le moment)

Salut,

Le flux est l'une des notions de base de la compréhension du positionnement CSS.
Voici comment le comprendre : http://openweb.eu.org/articles/initiation_flux/

Merci à toi Raphael la notion de "flux" est plus clair pour moi.
Cepedant je n'arrive toujours pas à régler mon problème.

Merci d'avance.

Effectivement le footer se place par rapport à l'élément #bloc.
Si le contenu de ce div etait plus long que celui du menu tu n'aurais aucun problème. Le fait qu'il soit plus court que le menu te donne l'impression que la marge ne s'applique pas.

Pour débugger tes pages je te conseille de te procurer l'extension "webdevelopper" pour Firefox. L'autre solution consiste à mettre des couleurs de background (temporaires bien sur) à tes blocs ce qui te permettra de visualiser où finissent tes div.

Merci pour le conseil je viens d'installer "webdevelopper" et il s'avère très pratique.

J'ai aussi mis une couleur de fond (bleu clair entre les 2 blocs roses ici) et le bloc s'arrete bien haut

J'ai pensé mettre à mettre un height avec un certains nombre de pixels mais alors je pourrais pas mettre autant de bloc rose que je veux

Je ne voie pas de solutions à mon problème

Merci de m'en donner une ou de m'eclairer.
Modifié par Snoopy17 (19 Dec 2005 - 11:49)

Bonjour,

Les règles CSS de ce qu'on appelle la fusion des marges (verticales) entre blocs en flux et/ou blocs flottants ne sont pas respectées de la même manière par tous les navigateurs. Le comportement d'IE Windows est par ailleurs perturbé par le système de layout propre à ce navigateur.

Ici, une solution amusante (ce n'est pas la seule possible) :
- renoncer au clear générateur des problèmes de fusion des marges entre le menu flottant et le #footer en flux.
- pour obliger le #footer à rester tout de même sagement en bas, jouer sur sa largeur: le faire flotter lui aussi, mais avec une largeur égale à 100%, ce qui lui interdit de se placer "à côté" de quoi que ce soit (dans son contexte de formatage).

Pour conserver des marges latérales au #footer, cette largeur de 100% est répartie entre un width: 98% et des marges gauche et droite de 1% chacune.

Pour éviter le bug de double marge des flottants dans IE Win, on ajoute un display: inline;

Le résultat est toujours... le résultats de bugs, mais identique sur Opera, FF et IE Win, pour ceux qui attachent de l'importance à ce détail

#footer {
float: left;
margin:20px 1% 0 1%;
display: inline;
width: 98%;
}

Modifié par Laurent Denis (19 Dec 2005 - 13:06)

Merci à toi mais j'ai fais plus simple !

J'ai juste appliqué un float:left; à mon footer et rien de plus.

Par contre je ne sais pas si ca passe sous Opera ni safari donc si quelqu'un pouvait tester et me montrer un screen ca serait cool
Modifié par Snoopy17 (19 Dec 2005 - 13:48)

Oui, on peut aussi, en méthode "bourrin"

[méthode bourrin: technique de développement abondamment recommandée par tous les directeurs de projet, également appelée "Quik and dirty", consistant à désespérer le spécialiste de service en appliquant des solutions effroyablement efficaces, mais affreuses à tous points de vue. L'une des raisons majeures pour laquelle les directeurs de projets font avancer le Web, mais sont considérés comme des gens très limités par les spécialistes placés sous leurs ordres. Les directeurs de projets utilisent les specs en les violant. Les spécialistes préparent la prochaine spec ]

Cependant, je regrette un peu l'inutile barre de scroll horizontale dans IE Win et Opera en 800x600, par exemple
Modifié par Laurent Denis (19 Dec 2005 - 14:17)

Edit : j'ai pu testé sous IE en 800*600 et j'ai réussi en local à le faire rentré sous IE mais je sais pas si sous Opera aussi !

Pourtant c'est bien 780px maximum pour le faire rentrer en 800*600 non ? car j'ai du mettre 778px

As-tu une solution à ca ?

Merci d'avance
Modifié par Snoopy17 (19 Dec 2005 - 15:20)

Un autre chose si j'ecris beaucoup de texte le footer sous firefox va coller tout en bas ! mais pas sous IE !

Sous IE le margin-bottom:20px; du body sera bien appliqué et non sous firefox merci de votre aide

UP