28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pied de page qui refuse clear:both avec IE

Bonjour,

Je n'arrive pas du tout à garder mon pied de page en bas avec IE windows xp. Tout va bien avec les autres.
Avez-vous une idée ?
http://ppzx.net/pierre/photos/index.php5 (Edit par Hermann)

1 entête ;
2colonnes ;
2 blocs en float=left
1 pied de page.

Le clear bothne marche pas ;

#pied-de-page{
clear: both;
color: white;
font-size: 9px;
line-height: 16px;
background-color: #b0a99c;
text-align: center;
letter-spacing:6px;
margin-bottom: 15px;
height: 16px;
}

Merci d'avance, pandrekano
Modifié par pierreandre (10 Jun 2007 - 15:20)
Bonjour,
faites attention quand vous éditez vos liens Smiley cligne

@ghost. Smiley rolleyes On est pas vraiment dans un cas de contexte de formatage.

@Pierreandre. Le clear est bien actif. Aprés si vous souhaitez avoir un footer
en bas de page quelque soit la hauteur de celle-ci, c'est une autre histoire.
Question: pourquoi tout ces <h2> vide?
Modifié par Hermann (09 Jun 2007 - 20:26)
@hermann

Bonjour, je pensais à un code du type:
<style type="text/css">
#conteneur {
background-color: lime;
width: 800px;
}

#gauche{
background-color: yellow;
width: 600px; 
float: left;
height: 200px;
 }

#droite{ 
background-color: red;
width: 200px;
margin-left: 600px; 
height: 100px;
}

#pied { 
background-color: green; 
height: 30px;
clear: both;
}

</style>
</head>
<body>
<div id="conteneur">
	<div id="gauche">
	</div>
	<div id="droite">
	</div>
	<div id="pied">
	</div>
</div>
</body>


Que je trouve (en plus complexe) souvent peu robuste avec IE surtout si on a des blocks flottants dans un des deux blocs gauche et droite. Au quel je préfère:
<style type="text/css">
#conteneur {
background-color: lime;
width: 800px;
overflow: hidden;
}

#gauche{
background-color: yellow;
width: 600px; 
float: left;
height: 200px;
 }

#droite{ 
background-color: red;
width: 200px;
margin-left: 600px; 
height: 100px;
}

#pied { 
background-color: green; 
height: 30px;
width: 800px
}

</style>
</head>
<body>
<div id="conteneur">
	<div id="gauche">
	</div>
	<div id="droite">
	</div>
</div>
<div id="pied">
</div>
</body>

Souvent plus résistant !! Smiley cligne
Bonjour à vous,
Merci d'avoir répondu aussi vite et aussi bien.

@ Hermann
Merci d'avoir corrigé mon lien.
J'utilise les <h2> vides pour obtenir des espaces plutôt que des <br />. Ce n'est peut-être pas une bonne solution.

Comme je suis sur un Mac et que j'utilise la famille des FF, Je vois ce problème seulement sur le windows xp de ma conjointe (image jointe):

@Florent V
Pas de problème constaté... Là, je ne sais pas quoi dire...
Au moins je vaus corriger le bug qui n'a rien à voir avec le pied de page. Merci de ton intervention.
Pour mon footer, je désire seulement qu'il arrive après le reste et non en plein début de la page.

@ghost
«Tout fonctionne !» Là aussi je ne comprends pas...
Par contre je vais utiliser ce que tu me dis pour les contextes de formatage que je ne connaissais pas du tout.

Je suis tout à fait débutant et je vais vous revenir dès que je vais avoir essayé vos conseils. Je vous trouve vraiment «supers !» Merci
À bientôt pour que je puisse écrire résolu,
Amitiés, pandrekano upload/684-copie.jpg
OK, je vois le bug, mais avec IE7. J'avais testé avec IE6, et pas de problème.
Un peu tard pour se pencher dessus ce soir, on verra demain.
@ghost. Ok là je vois mieux. Au temps pour moi donc Smiley cligne On peut être dans un cas de contexte de formatage mais je doute fort que cela permette de résoudre le problème posé.

Pierreandré a écrit :
J'utilise les <h2> vides pour obtenir des espaces plutôt que des <br />. Ce n'est peut-être pas une bonne solution.

Non pas du tout!
Les <h2> ne doivent être utilisés que pour des titres de sections ne niveau 2 (importance hiérarchique) et rien d'autres.
De même l'usage du <br /> (cas plus fréquent) ne devrait se faire uniquement dans le cas ou l'on souhaite forcer une coupure (break) de ligne à l'intérieur d'un bloc de texte.

Pour créer un espace sous la bloc flottant comprenant la gallerie de photos, vous devez donc ajouter une marge basse à ce bloc.
Une marge haute au bloc dégagé (clear) suivant n'est pas une bonne solution puisque elle sera sans effet sous IE...

Ceci dit, le comportement d'IE7 est assez étonnant, désolé mais peux pas tester, je n'ai que IE6 sur ce poste.
Modifié par Hermann (10 Jun 2007 - 01:44)
Bon...

Testé à l'instant, à la fois en local (en copiant la page) et en ligne, et je n'arrive pas à reproduire le bug, que ce soit avec IE6 ou avec IE7. Smiley hmm
Re,

Bon, sur un de mes derniers site, j'ai le même problème, un bug aléatoire sur un pied de page qui "remonte" sur ie7 ou 6 (FF et opera ok). Au rechargement de la page le problème disparait pour réapparaitre un peu plus tard.
Alors tests réalisés:
- Utiliser le contextes de formatage : négatif Smiley bawling
- éliminer le float par un positionnement en absolute du bloc de gauche, margin-left pour le bloc droit laissé dans le flux (toujours plus long que le gauche par un min-width) et pied de page positionné aussi dans le flux : négatif Smiley bawling
- Même disposition mais pied de page en absolute, bottom: 0 avec un padding-bottom sur le bloc droit (pour réserver la place au pied). il va de soit que le conteneur (bloc gauche + droit) est en relative: résultat, j'en sais rien à terme pour l'instant ça a l'air d'aller mais vu que c'est aléatoire !!! Smiley biggol Smiley biggol Smiley biggol Smiley bawling

Pour les curieux : là
(ps: la css est un peu tarabiscotée, la mise en page étant particulière)
Au fait, il me semble que ce genre de bug se produit essentiellement sur des pages où il y a des images dans le code HTML, notamment si les dimensions des images ne sont pas spécifiées via les attributs width et height.

Et aussi : dans le cas d'un pied de page positionné en absolu, si le conteneur positionné en relatif est doté du HasLayout, ça aide. Enfin c'est ce qu'il me semble.

Quoi qu'il en soit, ce bug semble être dû à une faiblesse du moteur de rendu d'IE, qui a du mal à calculer la hauteur exacte de la page lors de son chargement (notamment si les images ne sont pas déjà en cache).

Ou alors c'est encore autre chose... Smiley sweatdrop
Salut,
Peut-être utilise t-il un Window Xp sur MAC (et oui c'est possible) et donc IE
Mac (à mon avis), ce qui, vu le résultat ne m'étonnerait pas tant que ça, IE Mac étant
truffé de bug.
Modifié par Hermann (10 Jun 2007 - 12:39)
Bonjour à tous,

J'ai au moins appliqué le «html {font:100%}», puis «body{font .9em}», même si ça ne correspondait pas au bug du pied de page.
J'ai aussi enlevé tous mes «h2» vides. Ensuite, j'ai aussi essayé des tonnes d'affaires dont je ne me rappelle même plus ! Toutefois hier soir 23h heure locale (3h du matin heure de Paris) ça avait l'air de fonctionner sans bug. J'ai l'impression que ça tient, puisque vous n'avez pas trouvé de bug.
@Hermann
J'utilise un Mac G5 OS 10.4.9 et celui de ma blonde pour tester, un Dell windows xp avec FF et un explorer 7 juste pour les bugs.
IE Mac ne fonctionne plus et je ne l'utilisais pas.

Merci beaucoup à vous tous. Vous m'en avez beaucoup appris et je suis très content.

Je vais donc marquer «résolu», même si je ne sais pas trop ni le problème, ni la solution.
Amitiés, pandrekano
Sujet clos
Aller à