problème de fond sous ie7 (encore un =P) [résolu]

problème de fond sous ie7 (encore un =P) [résolu] - HTML/CSS - Programmation

Marsh Posté le 04-02-2008 à 13:38:16    

Bonjour à vous,
 
Je suis en train de me faire un site et j'ai un petit souci au niveau de mon fond sous ie7. Je m'explique.
J'ai donné à mon site une dimension précise avec un fond non uni dans mon div "contenu" que je voudrais garder au même endroit, même s'il y a une scrollbar.
Sous ie6, il y a une fonction qui va dans ce sens :

Code :
  1. div#contenu {
  2. height: 500px;
  3. overflow: auto;
  4. background: url(../images/content.jpg) no-repeat;
  5. background-attachment: fixed;  <- c'est cette fonction
  6. text-align: justify;
  7. }


Comme ça ne marchait pas sous firefox&cie, j'ai fait un deuxième css avec ce code :

Code :
  1. div#contenu {
  2. height: 500px;
  3. overflow: auto;
  4. background: transparent url(../images/content.jpg) no-repeat scroll 0%;
  5. text-align: justify;
  6. }


avec dans chaque page HTML un commentaire du genre

Code :
  1. <!--[if IE]>
  2. <link href="css/style-ie.css" rel="stylesheet" type="text/css" />
  3. <![endif]-->


Seulement voilà, ça pose un problème ça aussi, sinon ça serait pas marrant.  :lol:  
Mon "style-ie.css" ne marchait pas sur ie7 (l'image était toujours alignée en haut à gauche de la fenêtre, et non du div contenu), et je me suis rendu compte que ie7 prenait mieux le css que j'avais fait pour firefox.
J'ai donc changé mon commentaire en <!--[if IE6]> et là, le seul souci sous ie7, c'est que l'image est comme il faut en largeur mais elle est centrée en hauteur, et non fixe (il faut donc que j'arrive au milieu de mon scroll pour avoir l'image comme il faut). C'est un peu mieux mais le souci, c'est que du coup, ça le fait aussi sous ie6...  :fou:  
 
Pour résumer :
- soit j'ai un style pour ie et un pour les autres, mais du coup ça ne marche pas sous ie7 qui me met l'image en haut à gauche;
- soit j'ai un style pour ie6, et l'image dans les 2 versions d'ie est centrée verticalement.
 
Une idée de comment résoudre ça ?
Merci  :jap:  
 
P.S.: si y'a un truc qui n'est pas très clair pour vous, n'hésitez pas à me le dire =)


Message édité par mrplop le 05-02-2008 à 14:33:23
Reply

Marsh Posté le 04-02-2008 à 13:38:16   

Reply

Marsh Posté le 05-02-2008 à 14:32:50    

bon, en fait, j'ai trouvé une solution pour ceux que ça intéresserait.
j'ai séparé mon div en 2 parties :

Code :
  1. div#contenu_image {
  2. background: url(../images/content.jpg) no-repeat;
  3. }
  4. div#contenu {
  5. height: 500px;
  6. overflow: auto;
  7. text-align: justify;
  8. }


et dans le code html ça donne ça :

Code :
  1. <div id="contenu_im">
  2. <div id="contenu">
  3. bla bla bla bla bla
  4. </div>
  5. </div>


 
c'est pas très joli mais au moins ça marche...
et en plus, je n'ai plus besoin d'avoir 2 css différents pour ie et firefox&cie, un seul suffit.
j'ai donc pu virer le commentaire <!--[if IE]>


Message édité par mrplop le 05-02-2008 à 14:35:14
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed