28173 sujets

CSS et mise en forme, CSS3

Background décalé à cause de background-attachement sous firefox

Bonjour !

J'ai un petit problème de background dans une <div>.
Je souhaite avoir un background fixé.

Au début je n'avais pas mis la propriété background-attachement:fixed, ce qui posait probleme sous IE (logique).
J'ai donc décidé de rajouté background-attachement:fixed et là le probleme ne se pose plus sous IE mais sous Firefox.
Il me décale l'image de fond.

Je vous mets le lien vers le site : http://zonezand.free.fr/site/elise/

Voici une capture d'écran sous IE :
http://zonezand.free.fr/bordel/pb/IE.jpg

Voici une capture d'écran sous FF :
http://zonezand.free.fr/bordel/pb/FF.jpg

c'est assez bizarre comme comportement je trouve.

voici le code CSS de la <div> en question : 

div#contenu div#droite div#droite_middle{
	overflow:auto;
	height:340px;
	padding:0 5px 0 5px;
	background-image:url("images/contenu.gif");
	background-repeat:no-repeat;
	background-attachment:fixed;
}


l'organisation du site est la suivante :

<div id="entete"></div>

<div id="contenu">

   <div id="haut"></div>

   <div id="gauche">
      <dl id="menu"></dl>
    </div>

    <div id="droite">
       <div id="droite_top"></div>
       <div id="droite_middle"></div>
    </div>

</div>

<div id="pied"></div>


Merci d'avance ! Smiley cligne
Modifié par Zeke (14 Mar 2006 - 16:15)
toujours rien à l'horizon...j'ai essayé plein de trucs mais rien ne fonctionne...

please help Smiley cligne
Modifié par Zeke (14 Mar 2006 - 20:15)
C'est effectivement un peu bizarre.

Au passage le comportement avec opera est le même que pour firefox.

Solution d'évitement :

pas de background-attachment dans la css générale et tu le mets seulement pour IE via un commentaire conditionnel.

çà résoud le problème mais çà n'élucide pas le mystère.

Par contre je trouve que tout cela entraine un scrolling bien laborieux (avec les trois navigateurs).
clb56 a écrit :
C'est effectivement un peu bizarre.

Au passage le comportement avec opera est le même que pour firefox.


Ah ! C'est interessant...je dois avoir quelque chose de mauvais dans la css alors...
je vais analyser ca plus en détails.

clb56 a écrit :

pas de background-attachment dans la css générale et tu le mets seulement pour IE via un commentaire conditionnel.


Sinon il n'y a pas moyen de mettre des commentaires conditionnels dans des fichiers externes ? (à ma connaissance non, mais on sait pas toujours tout XD)

clb56 a écrit :

Par contre je trouve que tout cela entraine un scrolling bien laborieux (avec les trois navigateurs).


Oui...ca fait du lourd pour pas grand chose...je dois avoir un petit soucis ailleurs...

Je vous tiens au courant !

Merci encore !
Et pour ceux qui ont des idées, hésitez pas !
Zeke a écrit :

Sinon il n'y a pas moyen de mettre des commentaires conditionnels dans des fichiers externes ?


Oui bien sur mais ce n'est pas ainsi que l'on procède. Dans le head on met :

<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="pour_IE.css" />
<![endif]-->


Et c'est dans pour_IE.css que tu pourrais mettre le background-attachment.
Modifié par clb56 (14 Mar 2006 - 22:44)
le retour de la vengeance...et rien...
J'ai épuré le plus possible ma CSS et mon code HTML pour ne garder que les élements importants, et le probleme est toujours là.

Voici le lien pour visualiser : http://zonezand.free.fr/bordel/pb/bg_div/bg.html

Ca doit être véritablement un bug du moteur de Firefox (et d'Opera).

voici le code CSS epuré : 

*{
	margin:0;
	padding:0;
}

/******************************************/

div#contenu{
	width:800px;
	height:450px;
	background-image:url("fond.gif");
	background-repeat:no-repeat;
	margin:auto;
}				

/*************************************/

div#contenu div#droite{
	width:570px;
	padding:0;	
}			

/*********************************************/

div#contenu div#droite div#droite_middle{
	overflow:auto;
	height:340px;
	padding:0 5px 0 5px;
	background-image:url("contenu.gif");
	background-repeat:no-repeat;	
	background-attachment:fixed;
}

/******************************************/

body{
	font-family:"Trebuchet MS",Tahoma,Sans-Serif;
	font-size:0.8em;
	background-color:#666666;
}


et voici le code HTML épuré : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Test</title>
	<link rel="stylesheet" href="style_2.css" />
</head>

<body>
<div id="contenu">
	<div id="droite">
		<div id="droite_middle"></div>
	</div>
</div>
</body>

</html>


Pour rappel, je souhaitais utiliser background-attachement étant donné que le contenu de <div id="droite_middle"> va dépasser la taille de base.

DONC :

Si j'enlève background-attachment, le fond de <div id="contenu"> est à sa place par contre si je le laisse, le fond est coupé dans Firefox.

Par contre si je laisse background-attachment mais que l'enlève margin:auto dans div#contenu, tout se colle à gauche (logique) et le background n'est plus coupé.

J'en conclus donc, que background-attachment n'apprécie pas les marges...Gros bug à l'horizon me semble t'il...
J'ai testé en ajoutant background-attachment à div#contenu (qui a aussi un bg) et le résultat est identique à l'autre div, le fond se décale.

Si quelqu'un a un pote à la fondation Mozilla, faites lui signe Smiley biggrin

Plus sérieusement, si vous pensez que je me trompe, dites le moi...
j'ai tout essayé et avec un code très épuré (voir plus haut) le bug est encore et toujours là...
Ca doit être inhérent au moteur de rendu...

Vos avis sont attendus avec impatience Smiley cligne
Bonjour,

Désolé de déterrer ce topic, mais j'ai rencontré le même problème, et en cherchant je suis tombé dessus.
Comme j'ai trouvé une solution, je la mets ici, sait-on jamais ça pourrait servir à quelqu'un...


#div {
  background-image : url('blabla.gif');
  background-repeat : no-repeat;
  background-attachment:scroll !important;
  background-attachment: fixed;
}

Avec ceci, mon fond est bien positionné sous FF et IE.

Voila !
A bientôt,
Doc'
Sujet clos
Aller à