[Résolu] Pour une fois, c'est FF qui me pose problème !

Bonjour,

Encore un exemple qui illustre des différences de rendu entre FF et IE !
Cette page (http://nouslesfrancais.free.fr/test/court) a l'apparence qui je souhaite dans IE, mais pas dans FF ! (le menu ne doit pas recouvrir la barre inférieure).

Merci par avance ! Brian

Voilà ma feuille de style !

body {
font-family: Verdana;
font-size: 8pt;
background-color: #6c859c;
margin: 20px;
padding: 0px;
color: #ffffff;
}
a:link { color:#FFA500; text-decoration: none;}
a:hover { color: #FFA500; text-decoration: underline;}
a:visited { color:#FFA500; text-decoration: none;}
.princ {list-style-type: square; margin: 12px;}
.sec {list-style-type: none; margin: 0px;}
.image {border-width: 0px; vertical-align: middle;}
h1 { font-size: 18pt; color: #C0C0C0; font-weight:bold; margin: 0px; padding-top: 0px; padding-bottom: 0px;}
h2 { font-size: 12pt; color: #99cccc; font-weight:bold; margin: 0px; padding-top: 0px; padding-bottom: 0px;}
h3 { font-weight:bold;}
li { margin: 12px; padding: 0px;}
ul { list-style-type: none; margin: 0px; padding: 0px;}
#tete {
border-width: 1px;
border-style: dashed;
border-top-style: solid;
border-color: #000000;
}
#date {
background-color: #000000;
text-align: right;
}
#slogan {
background-color: #506e85;
text-align: center;
}
#haut {
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #6c859c;
}
#pub {
width: 488px;
float: left;
}
#recherche {
text-align: right;
margin-left: 518px;
}
#droite {
margin-left: 205px;
border-width: 1px;
border-style: dashed;
border-top-style: solid;
border-color: #000000;
}
#gauche {
width: 185px;
float: left;
border-width: 1px;
border-style: dashed;
border-top-style: solid;
border-color: #000000;
}
#titre {
background-color: #000000;
text-align: center;
}
#corps {
background-color: #506e85;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
text-align: left;
}
#menu {
background-color: #000000;
text-align: center;
}
#liens {
background-color: #506e85;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
line-height: 15px;
}
#pied {
background-color: #000000;
margin-top: 20px;
width : 100%;
border-width: 1px;
border-style: dashed;
border-color: #000000;
text-align: center;
}

Modifié par Brian (14 Jul 2006 - 22:48)

(Désolé, c'est télégraphique, suis pressé Fais une recherche sur ce forum sur le thème des dépassements de flottants, des flottants dépassant du bloc conteneur, etc.

Hop, http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Modifié par mpop (16 Jul 2006 - 03:23)

Euh, je suis un peu perdu !

@+ Brian

Bonsoir,

Le comportement dans FF est tout à fait normal. Ton menu étant flottant, le texte du pied de page en flux vient se placer à côté de lui, tandis que son arrière-plan se "glisse" en dessous du flottant. C'est un bug de rendu d'IE qui lui fait repousser le pied de page plus bas quand il est dimensionné.

Pour mettre tes navigateurs d'accord :
- donne au pied de page la propriété clear:left qui lui interdit de venir se mettre à côté du menu
- mais donne-lui aussi les propriétés float:left; width: 100% qui vont l'empêcher de fusionner ses marges verticales avec ses petits camarades, et qui vont te permettre d'obtenir tes quelques pixels d'expace entre le bas du menu et le pied de page grâce à sa marge supérieure.
Modifié par Laurent Denis (14 Jul 2006 - 20:12)

Merci beaucoup, ce forum est vraiment un forum de qualité, et j'ai donc raison de le recommander à tous ceux qui ont des problèmes avec les feuilles de style. Bravo pour cette qualité.

@+ Brian