Espace entre sitcky footer et bas de page firefox

**userparis** · 05/06/2013, 14h57

Bonjour à tous,

J'essaie de mettre en place un footer à l'aide d'un code que j'ai pu trouver sur le net pour les sticky footer.

Figurez-vous qu'il fonctionne très bien pour IE par contre quand je passe sur mozilla, j'ai un écart de 3/4 pixel entre le bas du sticky et le bas de la page.

Voici le code pour voir si vous reproduisez aussi ce problème :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="Acceuil1.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="wrap">
 
	<div id="main" class="clearfix">
 
		<div id="content">
 
		</div>
 
		<div id="side">
 
		</div>
 
	</div>
 
</div>
 
<div id="footer">
 
</div>
</body>
</html>

CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html, body, #wrap {height: 100%;}
 
body > #wrap {height: auto; min-height: 100%;}
 
#main {padding-bottom: 150px;}  /* must be same height as the footer */
 
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
	background-color: gray;} 
 
 
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Le footer est en gris alors que la page est blanche, l'espace devrait être flagrant chez vous aussi ?

Merci de votre aide.

**userparis** · 05/06/2013, 15h17

re, j'ai trouvé un autre code de sticky footer qui n'a pas ce genre de problème : http://www.developpez.net/forums/d13...=sticky+footer

J'essai de l'intégrer à ma page, merci.

**rodolphebrd** · 05/06/2013, 15h36

Bonjour,

les différences que vous constatez entre les navigateurs sont paliées par un reset CSS, bien plus étoffé que la ligne de code que je vous transmets pour exemple:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
*{
	margin:0;
	padding:0;
}

Avec cette portion de code vous constaterez que votre décalage disparaît.

**userparis** · 05/06/2013, 16h16

Bonjour et merci pour votre réponse.

En effet cela résoud le problème

Par contre je ne sais pas trop ce qu'est un reset CSS alors je vais faire quelques recherches à ce sujet

Merci

**userparis** · 06/06/2013, 11h40

Bonjour, malheureusement je ré ouvre ce topic car je viens de me rendre compte que l'ajout du code

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
* {
margin: 0;
}

abime l'affichage du contenu de mon site

Y a t-il un moyen de faire coordonner le tout ? Peut-on se passer de cette ligne de code qui abime le reste de ma page ?

Sinon, il y a peu etre une astuce mais qui est contraignante : Pour ne pas voir afficher ce pixel de différence, faire en sorte que le fond de page soit de meme couleur que le pied de page... Pas très propre.

Merci.

**rodolphebrd** · 06/06/2013, 11h47

Le principe du reset doit être intégré dès le début de la conception de votre site.
Au cours de la création de celui-ci il faut systématiquement le tester sur plusieurs navigateurs (voire tous) pour parer à toutes les différences.

Dans votre cas la tâche va être chronophage mais néanmoins formatrice...

**Candygirl** · 07/06/2013, 18h50

Envoyé par userparis

Bonjour, malheureusement je ré ouvre ce topic car je viens de me rendre compte que l'ajout du code

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
* {
margin: 0;
}

abime l'affichage du contenu de mon site

Y a t-il un moyen de faire coordonner le tout ? Peut-on se passer de cette ligne de code qui abime le reste de ma page ?

Oui, tu n'as pas besoin d'un reset css complet (pratique discutable). En principe rajouter un simple body {margin:0;padding:0;} devrait résoudre ton problème:

Espace entre sitcky footer et bas de page firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager