28172 sujets

CSS et mise en forme, CSS3

[Résolu] Contenu "coupé" en 2 par le Footer (IE 7)

Salut à tous.

J'ai un soucis avec mon footer ou mon contenu, je n'ai pas encore trouvé lequel des 2.

En pièce jointe le contenu tel qu'il devrait s'afficher avec à la fin le footer.

IMAGE 1

La 2nde pièce jointe le problème sous IE7, le footer vient couper mon contenu en 2 Smiley biggol

IMAGE 2

Je n'avais encore jamais vu ça ... quelqu'un aurait-il une piste ?

Merci beaucoup.

Voici une partie du code + css :


<div id="global">

<div id="page">

<div id="header"></div>

<div id="left">

<div id="haut">
<a href="#" title="Catégorie Homme"><img src="interne/cat-homme.png" class="txt-categorie" height="53" width="105" title="Catégorie Homme" alt="Catégorie Homme"/><span>Catégorie Homme</span></a>
</div>

<div id="milieu">

<div id="product">
<div class="produits"></div>
<div class="choix"></div>
<div class="details"></div>
</div>

<div id="product">
<div class="produits"></div>
<div class="choix"></div>
<div class="details"></div>
</div>

<div id="product">
<div class="produits"></div>
<div class="choix"></div>
<div class="details"></div>
</div>

<div id="product">
<div class="produits"></div>
<div class="choix"></div>
<div class="details"></div>
</div>

</div><!--MILIEU-->

<div id="bas"></div>

</div><!--LEFT-->

<div id="right">
<h3><a href="#" title="Réseaux Sociaux">Réseaux Sociaux</a></h3>
<ul class="social">
<li><a href="#" class="facebook" title="Facebook"><span>Facebook</span></a></li>
<li><a href="#" class="twitter" title="Twitter"><span>Twitter</span></a></li>
<li><a href="#" class="mail" title="Contact"><span>Contact</span></a></li>
</ul>
</div><!--RIGHT-->

</div><!--PAGE-->

<div id="footer">
<div id="foot">

<div class="foot1">
<h3><a href="#" title="Paiements Acceptés">Paiements Acceptés</a></h3>
<ul class="paiement">
<li><a href="#" title="Paypal"><img src="visuels/paypal.png" height="23" width="41" alt="Paypal"/><span>Paypal</span></a></li>
<li><a href="#" title="Mastercard"><img src="visuels/mastercard.png" height="23" width="41" alt="Mastercard"/><span>Mastercard</span></a></li>
<li><a href="#" title="Visa"><img src="visuels/visa.png" height="23" width="41" alt="Visa"/><span>Visa</span></a></li>
<li><a href="#" title="Carte Bleue"><img src="visuels/cb.png" height="23" width="41" alt="Carte Bleue"/><span>Carte Bleue</span></a></li>
<li><a href="#" title="Wexpay"><img src="visuels/wexpay.png" height="23" width="41" alt="Wexpay"/><span>Wexpay</span></a></li>
</ul>
<h3><a href="#" title="Informations">Informations</a></h3>
<ul class="links">
<li><a href="#" title="Accueil">Accueil</a></li> / <li><a href="#" title="Informations">Informations</a></li> / <li><a href="#" title="Paiements acceptés">Paiements acceptés</a></li> / <li><a href="#" title="Mode d'expédition">Mode d'expédition</a></li> / <li><a href="#" title="Conditions Générales de Ventes">Conditions Générales de Ventes</a></li> / <li><a href="#" title="Contact">Contact</a></li></ul>
</div>

<div class="foot2">
<ul>
<li><a href="#" class="copyright" title="Copyright &copy; 2010"><span>Copyright &copy; 2010</span></a></li>
<li><a href="#" class="76"  title="76" onclick="window.open(this.href,'externe'); return false;"><span>76</span></a></li>
</ul>
</div>

</div><!--FOOTER-->
</div><!--FOOT-->

</div><!--GLOBAL-->

</body>
</html>




*{margin:0; padding:0;}
body {
margin: 0;
padding: 0;
font:0.8em Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background-image: url(interne/back.png);
background-repeat:repeat-x; 
background-color:#000000;
}
#global {
background-image: url(interne/background.jpg);
background-repeat:no-repeat;
background-position: 50% 0px;
}
#page {width:950px;margin:auto;}
/******* HEADER *******/
#header {
height: 321px;
margin-top:-30px;
background-position:-8px -92px;
background-image:url(visuels/sprites.png);
background-repeat:no-repeat;
margin-bottom:12px;
position:relative;
z-index:20;
}
/******* LEFT *******/
#left {
margin-top:5px;
float: left;
width: 658px;
color:#000000;
margin-left:30px;
margin-bottom:-100px;
}
/******* HAUT *******/
#haut {
height:62px;
width:658px;
background-image:url(interne/left-haut.png);
background-repeat:no-repeat;
}
/******* MILIEU *******/
#milieu {
width:658px;
min-height: 420px;
height:auto !important;
background-image:url(interne/left-milieu2.png);
background-repeat:repeat-y;
padding-top:40px;
float:left;
}


#product {
width:620px;
margin-left:20px;
background-image:url(interne/sep-double.png);
background-repeat:no-repeat;
background-position:30px 0px;
padding-top:10px;
float:left;
}
.produits { width:200px; height:260px; background-color:orange; float:left;}
.choix {  width:200px; height:260px; margin-left:10px;  background-color:blue; float:left;}
.details {  width:200px; height:260px; margin-left:10px; background-color:purple; float:left;}


/******* BAS *******/
#bas {
height:194px;
width:732px;
margin-left:-73px;
background-image:url(interne/left-bas.png);
background-repeat:no-repeat;
float:left;
}
/******* RIGHT *******/
#right {
float: right;
margin-right:30px;
width: 215px;
}


/******* FOOTER *******/
#footer {
clear: both;
background-image:url(interne/foot.png);
background-position:0 125px;
background-repeat:repeat-x;
}
#foot {
width:950px;
margin:auto;
height:164px;
background-image: url(interne/footer.png);
background-repeat:no-repeat;
}
/******* FOOT1 *******/
.foot1 {
padding-top:30px;
height: 80px;
margin-left:-110px;
}
/******* FOOT2 *******/
.foot2 {
padding-top:50px;
margin-left:-200px;
height:20px;margin-bottom:20px;
}
.foot2 ul { margin:auto; width:647px;}
.foot2 li {float:left;}
.copyright { width:214px; height:20px; background-image:url(visuels/sprites.png); background-repeat:no-repeat; background-position:0px -995px; display:block; margin-right:5px;}
a.copyright:hover { background-position: 0 -1015px;}
.76 { width:428px; height:20px; background-image:url(visuels/sprites.png); background-repeat:no-repeat; background-position:-214px -995px; display:block;}
a.76:hover { background-position: -214px -1015px;}
/******* PAIEMENT *******/
.paiement {
height: 23px;
width:250px;
float:left;
margin-left:350px;
}
.paiement li {display:inline;padding-left:5px;}
/******* LINKS *******/
.links {
float:left;
text-align:center;
width:950px;
margin-top:30px;
}
.links li {display:inline;}

Modifié par yank (10 Jun 2010 - 22:00)
Bonjour,

Est-ce que, si tu rafraichit la page, le problème disparait ? Car ce peut être un problème de chargement.

Pourrais-tu remplacer tes images par des miniatures ?
Laurie-Anne a écrit :
Bonjour,
Est-ce que, si tu rafraichit la page, le problème disparait ? Car ce peut être un problème de chargement.
Pourrais-tu remplacer tes images par des miniatures ?

Merci pour ton message.

Il se passe quelque chose d'étrange effectivement, non pas quand je recharge ma page mais par exemple 1 fois sur 3 quand je reste sur la page au bout d'un moment le footer vient se placer en bas.

Mais comment régler ce décalage ? parce qu'il reste quand même affiché plusieurs longues secondes ...

Merci
Salut.

Regarde si en vidant ton cache Internet explorer çà arrange les choses.

Sinon regarde si le bouton compatibilité ancien site (pas sur qu'il existe sur IE7) est activé ou pas.
Htb a écrit :
Salut.
Regarde si en vidant ton cache Internet explorer çà arrange les choses.
Sinon regarde si le bouton compatibilité ancien site (pas sur qu'il existe sur IE7) est activé ou pas.

Cache vidé mais ça ne change rien ...

Ce n'est donc pas un problème de positionnement CSS ?
Hello,

Premièrement attention, tu a plusieurs éléments avec id #products, peut-être est-ce ça qui dérange le parseur de IE.

Essaie de donner le layout (height:1% / zoom:1) à #page pour voir.

Mais une page en ligne nous permettrait de plus facilement t'aider.
Salut.

Il est vrai que je vois pas pourquoi IE 7 à ce comportement bizarre.

Peut-être que tu devrais essayer de mettre les données de ton footer à la suite de ton block pricipal (en dessous les couleurs orange-bleu-vilolet), et créer un div en dessous avec en background la bande jaune-orange qui fait toute la largeur de ta page.

Comme cela ca simplifie le css avec des margin: auto; pour le contenu du div des liens/carte bancaires, car peut-être que IE7 interprète mal certaines positions négatives.
Ensuite ton div footer avec la bande jaune orange aura une taille fixe et un clear:both;
Tymlis a écrit :
Hello,
Premièrement attention, tu a plusieurs éléments avec id #products, peut-être est-ce ça qui dérange le parseur de IE.
Essaie de donner le layout (height:1% / zoom:1) à #page pour voir.
Mais une page en ligne nous permettrait de plus facilement t'aider.


a écrit :
Premièrement attention, tu a plusieurs éléments avec id #products

Oula oui, je n'avais pas fait attention Smiley confused la tête dans les tests ...

a écrit :
Essaie de donner le layout (height:1% / zoom:1) à #page pour voir.

J'essaie cette solution dès que possible (ce soir) je n'ai pas IE sous la main la tout de suite (MAC).

a écrit :
Mais une page en ligne nous permettrait de plus facilement t'aider.

J'en suis bien conscient, si je ne trouve pas de solution ce soir je mettrais une page test en ligne Smiley cligne
Tymlis a écrit :
Hello,

Premièrement attention, tu a plusieurs éléments avec id #products, peut-être est-ce ça qui dérange le parseur de IE.

Essaie de donner le layout (height:1% / zoom:1) à #page pour voir.

Mais une page en ligne nous permettrait de plus facilement t'aider.


Effectivement, bien vu. Smiley cligne
Htb a écrit :
Salut.
Il est vrai que je vois pas pourquoi IE 7 à ce comportement bizarre.
Peut-être que tu devrais essayer de mettre les données de ton footer à la suite de ton block pricipal (en dessous les couleurs orange-bleu-vilolet), et créer un div en dessous avec en background la bande jaune-orange qui fait toute la largeur de ta page.
Comme cela ca simplifie le css avec des margin: auto; pour le contenu du div des liens/carte bancaires, car peut-être que IE7 interprète mal certaines positions négatives.
Ensuite ton div footer avec la bande jaune orange aura une taille fixe et un clear:both;


Je vais y réfléchir aussi Smiley cligne mais pour une question de cohérence je trouvais ça mieux de mettre ces infos dans la partie du footer et non du contenu principal qui va contenir les produits à vendre.

Mais si il n'y a pas d'autres solutions et que cela peut aider, je le ferais.

Smiley cligne
Voila apparemment problème réglé en ajoutant :


#content {width:950px;}


Une nouvelle DIV CONTENT qui englobe LEFT et RIGHT.

J'avais un autre soucis également sous IE 7, c'est que le footer n'apparaissait pas totalement, enfin pas le footer mais le bas de la tâche à gauche (au niveau du footer) cette image fait partie de ma DIV BAS.

Il me semble avoir résolu ce soucis également mais je veux bien quelques volontaires pour vérifier que tout s'affiche bien sous IE 7, que la tâche en bas à gauche est totalement visible et que les liens du footer sous la tâche sont bien cliquables. (je n'ai pas accès à IE avant ce soir).

Merci pour le coup de pouce.
Modifié par yank (10 Jun 2010 - 20:16)
Sujet clos
Aller à