Bug Firefox ? Image "container" cesse de se répéter en hauteur

**LaurentBlanc** · 23/06/2013, 23h34

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é) :

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.

Didier

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

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
<!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>

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@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) "Candygirl", ici, a donné une solution qui fonctionne :

http://www.developpez.net/forums/d13...r/#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/show...=1#post5269797

Code CSS :

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

1
2
3
4
5
6
#content
{
width:732px;
height:auto;
background:url(images/repeater.gif) repeat-y center fixed;
}

---

**LaurentBlanc** · 24/06/2013, 08h55

Information supplémentaires :

- 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).

**rodolphebrd** · 24/06/2013, 09h27

Bonjour et bienvenue,

avant de tester votre code (pour l'instant je ne vois pas de problème) pourquoi ne pas vous orienter vers une solution avec border-radius et box-shadow.
L'utilisation d'images pour arrondir des coins ne se fait plus trop.

**Candygirl** · 24/06/2013, 09h30

Bonjour,

Pour ma part, sur FF 21 PC, je ne constate pas le problème décrit, même avec un padding-top de 200000px.

Testes-tu avec une autre configuration ? As-tu essayé en déactivant tous les modules complémentaires ?

**rodolphebrd** · 24/06/2013, 09h32

Je viens de tester avec les images et un content de de 90000px tout fonctionne bien.

**rodolphebrd** · 24/06/2013, 09h34

Ah @Candygirl est là donc ça va être résolu rapidement.

@LaurentBlanc: pensez à vider le cache du navigateur...

**LaurentBlanc** · 24/06/2013, 17h21

Envoyé par rodolphebrd

avant de tester votre code (pour l'instant je ne vois pas de problème) pourquoi ne pas vous orienter vers une solution avec border-radius et box-shadow.

Bonjour,

J'ai expliqué pourquoi ci-dessus : sur la véritable page, il y a un header et un footer graphiques. Ici, c'est un modèle plus simple, mais la structure du code est la même.

Envoyé par Candygirl

Pour ma part, sur FF 21 PC, je ne constate pas le problème décrit, même avec un padding-top de 200000px.

Testes-tu avec une autre configuration ? As-tu essayé en déactivant tous les modules complémentaires ?

Config : FF 21, Win XP.

Désactivation des modules complémentaires (j'en ai 3 : Flash Video Downloader, Amazon S3 Organizer, User Agent Switcher) : ça ne change rien.

Envoyé par rodolphebrd

Ah @Candygirl est là donc ça va être résolu rapidement.

Probablement une blague interne, mais je me permets de rire aussi, même si je ne la comprend pas.

pensez à vider le cache du navigateur...

Le problème subsiste.

**rodolphebrd** · 24/06/2013, 18h03

Pour avoir un contenu "infini" pourquoi ne pas passer par une solution comme masonry

Après avoir lu votre lien sur le bug je pense qu'il serait préférable de vous orienter vers une solution en pur CSS (comme je vous l'ai mentionné précédemment border-radius et box-shadow) surtout pour un rendu aussi simple que celui que vous cherchez.

**LaurentBlanc** · 24/06/2013, 19h28

Envoyé par rodolphebrd

je pense qu'il serait préférable de vous orienter vers une solution en pur CSS (comme je vous l'ai mentionné précédemment border-radius et box-shadow) surtout pour un rendu aussi simple que celui que vous cherchez.

Je ne peux pas utiliser box-shadow. Ca ne convient pas à ce cas.

Il me semble que vous n'avez pas lu ce que j'ai écrit étant donné que je l'ai déjà écrit deux fois.

La page que je présente ici n'est pas la véritable page, mais un modèle très légèrement différent dans le sens où le header et le footer ne sont pas si simples : chacun est un bloc graphique rectangulaire.

Masonry, je ne connais pas. Je vais voir ce que ça donne. Merci.

**Candygirl** · 24/06/2013, 21h56

Après avoir rebranché mon vieux PC XP pour constater de mes yeux vu le problème (qui n'apparaît donc pas sur FF21 win7), j'ai constaté deux faits majeurs:

- Le problème est bien présent

- Ma machine a rendu l'âme droit derrière

Du coup , je ne peux faire aucun test -_- En principe un bricolage avec un background-position fixed devrait permettre de t'en sortir, comme suggéré ici par un gourou du css.

Code :

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

1
2
3
4
5
6
#content
{
width:732px;
height:auto;
background:url(images/repeater.gif) repeat-y center fixed;
}

**LaurentBlanc** · 24/06/2013, 23h05

Arf, Candygirl ! Désolé pour cet ennui !

L'astuce que tu donnes fonctionne.

Un grand merci.

Merci à tous ceux qui ont participé.

Je ne fréquente habituellement pas le forum developpez.com. Y a-t-il un système de don ? Nominatif, pour la communauté ou pour le fonctionnement du forum ? Je souhaiterai faire un geste en remerciement du service rendu. Fallait trouver la solution, chapeau !

Invité · 25/06/2013, 08h56

Envoyé par rodolphebrd

Ah @Candygirl est là donc ça va être résolu rapidement.

CQFD.

Candygirl

**Candygirl** · 25/06/2013, 09h28

Ouais mais non

Paul O'B

J'avoue, ça me frustre de ne pas avoir pris le temps de chercher 5min une solution que j'aurais dû trouver moi-même

On mettra ça sur le coup de l'émotion de la perte inestimable de mon ancienne machine de jeu aussi bruyante que le réacteur d'un avion ^^

Et stop flood mes messages !!!

J'en oublie l'essentiel:

EDIT

Envoyé par LaurentBlanc

Je ne fréquente habituellement pas le forum developpez.com. Y a-t-il un système de don ? Nominatif, pour la communauté ou pour le fonctionnement du forum ? Je souhaiterai faire un geste en remerciement du service rendu.

C'est un des aspect d'Internet que l'apprécie: l'échange de compétences. Il m'a fallu un temps fou pour aller demander moi-même de l'aide sur un forum de jardinage; j'éprouvais une forme de culpabilité à venir juste poser une question sans participer à d'autres discussions

Mais j'apporte ma modeste contribution ici, toi ailleurs (j'avais lu ton message avant édition ;p), et, au final, tout le monde est gagnant