Bonjour,
Sous Firefox (et uniquement Firefox), pour la page ci-dessous, l'image container (partie "contenu" de la page) ne se répète plus au-dessus d'une certaine hauteur de page (environ à partir de 1.000 sauts de lignes sur un test).
Voici ce que j'ai (le footer, situé plus bas, n'est pas montré) :
http://img15.hostingpics.net/pics/421595capture.gif
Savez-vous régler ce problème ? ===> EDIT : Une solution est en bas de ce post.
(J'ai fait des recherches en français et en anglais, mais je n'ai pas trouvé comment régler cet ennui. Probablement parce que je n'ai pas su trouver les mots-clés adéquats pour le décrire.)
Merci.
Laurent
Ajout :
- Le problème n'apparaît pas avec box-shadow, mais ça ne peut pas être utilisé dans ce cas : la véritable page est avec un header et un footer graphiques (différents de ceux donnés ici).
- Le problème est présent en test pour top-padding (#content) à partir d'environ 33000px (absent jusqu'à environ 32500px).
- Le problème est présent en test pour height (#content) à partir d'environ 33000px (absent jusqu'à environ 32500px).
J'ai vraiment besoin d'une page aussi haute (et plus).
images :
top.gif :
http://img15.hostingpics.net/pics/159203top.gif
repeater.gif :
http://img15.hostingpics.net/pics/721496repeater.gif
bottom.gif :
http://img15.hostingpics.net/pics/896399bottom.gif
HTML :
CSS (style.css) :
FINAL : VOICI UNE SOLUTION :
1) "AkaiKen", sur SiteDuZero.com, a indiqué que le problème est connu et pas encore résolu :
http://www.siteduzero.com/forum/sujet/bug-firefox-image-container-cesse-de-se-repeter?page=1#message-84462257
2) "Candygirl", modératrice du forum developpez.com, a donné une solution qui fonctionne :
http://www.developpez.net/forums/d1356748/webmasters-developpement-web/css/bug-firefox-image-quotcontainerquot-cesse-se-repeter-en-hauteur/#post7360807
---
un bricolage avec un background-position fixed devrait permettre de t'en sortir, comme suggéré ici par un gourou du css [Paul O'B] :
http://www.sitepoint.com/forums/showthread.php?939975-Background-on-1-page-won-t-go-to-bottom-ONLY-in-Firefox-on-a-PC&p=5269797&viewfull=1#post5269797
---
Modifié par LaurentBlanc (24 Jun 2013 - 23:51)
Sous Firefox (et uniquement Firefox), pour la page ci-dessous, l'image container (partie "contenu" de la page) ne se répète plus au-dessus d'une certaine hauteur de page (environ à partir de 1.000 sauts de lignes sur un test).
Voici ce que j'ai (le footer, situé plus bas, n'est pas montré) :
http://img15.hostingpics.net/pics/421595capture.gif
Savez-vous régler ce problème ? ===> EDIT : Une solution est en bas de ce post.
(J'ai fait des recherches en français et en anglais, mais je n'ai pas trouvé comment régler cet ennui. Probablement parce que je n'ai pas su trouver les mots-clés adéquats pour le décrire.)
Merci.
Laurent
Ajout :
- Le problème n'apparaît pas avec box-shadow, mais ça ne peut pas être utilisé dans ce cas : la véritable page est avec un header et un footer graphiques (différents de ceux donnés ici).
- Le problème est présent en test pour top-padding (#content) à partir d'environ 33000px (absent jusqu'à environ 32500px).
- Le problème est présent en test pour height (#content) à partir d'environ 33000px (absent jusqu'à environ 32500px).
J'ai vraiment besoin d'une page aussi haute (et plus).
images :
top.gif :
http://img15.hostingpics.net/pics/159203top.gif
repeater.gif :
http://img15.hostingpics.net/pics/721496repeater.gif
bottom.gif :
http://img15.hostingpics.net/pics/896399bottom.gif
HTML :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="pageholder">
<div id="top_part">
</div>
<div id="content">
<div id="contentpadding">
<h1>Lorem Ipsum</h1>
<h2>H2 Lorem Ipsum</h2>
<p>contenu</p>
</div>
</div>
<div id="bottom_part">
</div>
</div>
</div>
</body>
</html>
CSS (style.css) :
@charset "utf-8";
body
{
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#39658C;
}
h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
color:#cc0000;
text-align:center;
}
h2
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
text-align:center;
}
#wrapper
{
padding-top:30px;
padding-bottom:30px;
}
#pageholder
{
margin:auto;
width:732px;
height:auto;
}
#top_part
{
width:732px;
height:20px;
background:url(images/top.gif);
}
#content
{
width:732px;
height:auto;
background:url(images/repeater.gif) repeat-y;
}
#contentpadding
{
padding:10px 50px;
color:#000;
}
#bottom_part
{
width:732px;
height:20px;
background:url(images/bottom.gif);
}
FINAL : VOICI UNE SOLUTION :
1) "AkaiKen", sur SiteDuZero.com, a indiqué que le problème est connu et pas encore résolu :
http://www.siteduzero.com/forum/sujet/bug-firefox-image-container-cesse-de-se-repeter?page=1#message-84462257
2) "Candygirl", modératrice du forum developpez.com, a donné une solution qui fonctionne :
http://www.developpez.net/forums/d1356748/webmasters-developpement-web/css/bug-firefox-image-quotcontainerquot-cesse-se-repeter-en-hauteur/#post7360807
---
un bricolage avec un background-position fixed devrait permettre de t'en sortir, comme suggéré ici par un gourou du css [Paul O'B] :
http://www.sitepoint.com/forums/showthread.php?939975-Background-on-1-page-won-t-go-to-bottom-ONLY-in-Firefox-on-a-PC&p=5269797&viewfull=1#post5269797
#content
{
width:732px;
height:auto;
background:url(images/repeater.gif) repeat-y center fixed;
}---
Modifié par LaurentBlanc (24 Jun 2013 - 23:51)
