Footer disparu dans IE8Résolu/Fermé

Question

Bonjour, 
Je suis en train de réaliser un site pour une toute petite commune sans argent. Après bien des péripéties j'ai enfin réussi a centrer mes div ainsi que le div Global. Or le footer a disparu sur IE8 (erreur sur la page en bas à gauche du navigateur). Voici ma CSS:
font-size: 0.9em; /* taille relative de la police au lieu des pixels ou points */
scrollbar-base-color:#ffffff;
scrollbar-track-color:#CCCCCC;
scrollbar-arrow-color:#CCCCCC;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #FFFFFF;
background-color: #F9F9F9;
}

#global { /* position du div global dans la page */
/* Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré 
(il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc 
s'il est positionné en absolu */
position: relative; /* on positionne OBLIGATOIREMENT le conteneur en relatif */
top: -225px; /* le bloc global sera en haut de l'écran */
margin-left: auto; 
margin-right: auto;
width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre centré (largeur de la photo) */
height: 100%; /* la hauteur d'un écran */
text-align: left; /* on rétablit l'alignement normal du texte (toujours pour IE5 et inférieur) */
font-size: 0.9em; /* taille relative de la police au lieu de pixels ou points */
border: 1px solid #000000;
	}

#titre { /* position du div titre dans la page */
position: absolute; /* on positionne le conteneur en absolu */
top: 0px; /* L'image est à 5 px du haut de l'écran */
width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */
height: 190px; /* Hauteur de l'image */
background-image: url("/Photos_Saucede/Pyrenees.jpg");
background-repeat: no-repeat; /* l'image n'est pas répétée */
}

#principal { /* taille et aspect du bloc principal */
position: absolute; /* on positionne le conteneur en absolu */
font-size: 0.9em; /* taille relative de la police au lieu de pixels ou points */
top: 210px; /* le bloc global sera à 210 pixels du haut de l'écran */
width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */
height: 100%; /* la hauteur max du bloc principal est de 80 % (+le bandeau + le footer) */
padding: 5px; /* marge interne de 5px */
}

#footer { /* position et taille du footer */
position: absolute; /* on positionne le conteneur en absolu */
border-top: 1px solid #000000; /* on met une bordure sur la partie supérieure du footer */
width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */
font-size: 0.8em; /* taille relative de la police au lieu de pixels ou points */
bottom: 0px;
}
 L'index est visible ici (mon compte de test): http://txiki.free.fr/index_2.php 
Il fonctionne très bien sous Firefox et Opéra.

Autre question: malgré les hauteurs à 100%, vous pouvez remarquer que le footer ne se trouve pas au bas de l'écran. Pourquoi ?

Merci d'avance à ceux qui auront la patience de lire.

Configuration: XP Professionnel 2002
AMD Athlon XP2200+
1,80GHz
768 Mo de RAM

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Joe · Answer

Il ne faut pas utiliser de positionnement absolute. Tu as vu à quoi ressemble ton site quand tu redimensionnes ton navigateur ? C'est tout pourri :(

Est-ce que tu peux mettre ta page html également stp ?

txiki · Answer

Voici le code de la page: Commune de Saucède

Saucède

(Pyrénées-Atlantiques)

Un village que nous aimons : « Saucède », blotti au bord du gave d'Oloron. Leur habitants animent le quotidien dans un cadre rural où agriculteurs, professions libérales, employés, enfants, retraités, personnes actives ou pas, font bon ménage.

Le conseil municipal et moi-même sommes heureux de vous présenter notre belle commune de Saucède.

Martine Mirande
Maire

txiki · Answer

Bonjour à tous les experts en positionnement css, Sur le site que je prépare ci-dessus (http://txiki.free.fr/index_2.php ), le footer se retrouve en dehors du div global. Je sais l'image du bandeau me fout le bordel mais c'est provisoire. Ce qui m'intrigue c'est la position du footer (

) dont voici le CSS des 4 #: #global { /* position du div global dans la page */ /* Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré (il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc s'il est positionné en absolu */ position: relative; /* on positionne OBLIGATOIREMENT le conteneur en relatif */ top: -225px; /* le bloc global sera en haut de l'écran */ margin-left: auto; margin-right: auto; width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre centré (largeur de la photo) */ height: 100%; /* la hauteur d'un écran */ text-align: left; /* on rétablit l'alignement normal du texte (toujours pour IE5 et inférieur) */ font-size: 0.9em; /* taille relative de la police au lieu de pixels ou points */ border: 1px solid #000000; } #titre { /* position du div titre dans la page */ position: relative; /* on positionne le conteneur en absolu */ top: 0px; /* L'image est à 5 px du haut de l'écran */ width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */ height: 190px; /* Hauteur de l'image */ background-image: url("/Photos_Saucede/Pyrenees.jpg"); background-repeat: no-repeat; /* l'image n'est pas répétée */ } #principal { /* taille et aspect du bloc principal */ position: relative; /* on positionne le conteneur en absolu */ font-size: 0.9em; /* taille relative de la police au lieu de pixels ou points */ top: 20px; /* le bloc global sera à 210 pixels du haut de l'écran */ width: 1195px; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */ height: 80%; /* la hauteur max du bloc principal est de 80 % (+le bandeau + le footer) */ padding: 5px; /* marge interne de 5px */ } #footer { /* position et taille du footer */ position: relative; /* on positionne le conteneur en absolu */ border-top: 1px solid #000000; /* on met une bordure sur la partie supérieure du footer */ width: 100%; /* On met une valeur au bloc pour qu'il puisse etre positionné (largeur de la photo) */ padding-top: 5px; /* espace supérieur pour le texte */ line-height: 1.0em; /* hauteur max pour la ligne */ font-size: 0.9em; /* taille relative de la police au lieu de pixels ou points */ bottom: 0px; } Ce n'est pas le premier site que je réalise mais celui-là me pose de gros problèmes. Vous seriez très cools d'éclairer ma lanterne. Merci d'avance ! Le bonheur est la seule chose que l'on peut donner sans l'avoir.

txiki · Answer

Personne ?

Footer disparu dans IE8

4 réponses

Discussions similaires

Newsletters