28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Centrer Background body IE6 et IE7

Pages :
Bonjour à tous,

J'espère que vous avez passé un bon week end Smiley smile moi je me suis arraché le peu de cheveux qui me restait sur une connerie de IE et ne trouve pas de solution pour le moment,

Je vous explique :

J'ai une image en background directement dans le body ( j'ajoute une class page_accueil à mon body )

et je tape ceci :


.page_accueil {
	background: url('../img/bg_accueil.png') center repeat-y;
}


Donc IE8, FF, CHROME, SAFARI ... NIKEL l'image est parfaitement centré. ( Je dois préciser que l'image est d'un côté noir avec texte blanc par dessus et l'autre blanc avec texte noir par dessus donc si c'est pas centré on le voit direct :s .. )

Mais IE7 et IE6 ça ne marche pas, ça n'est pas centré.. le client veut donc arranger ça mais ce n'est pas moi qui est fait le site en gros j'ai juste à m'occuper de cette satané balise mais je bloque.. J'essaye par tous les moyens et il ne se passe rien ... le Background bouge pas et n'est jamais centré..

En plus je peux pas vous montrer car le site est pas lancé et est protégé par htpasswd...
En espérant que vous ayez déjà rencontré ce souci et que vous ayez pu le résoudre, merci d'avance..

Bastien
Bonjour,

Où l'image s'affiche-t-elle sous IE6/7 ?

Et en mettant:

background-position:center center;
??

As-tu besoin de repeat-y ?

Cordialement
Modifié par lddsoft (21 Mar 2011 - 10:11)
Merci pour ta proposition mais je viens de tester, et apparament ça bouge pas Smiley decu

Il y a surement une solution .. on va bien finir par trouver Smiley langue
Bonjour,

Sans plus de code, difficile de t'aider.

Ne serait-il pas possible de faire une page de test reproduisant le problème et de nous la montrer ?
Je peux vous joindre un screen, mais je vais pas pouvoir faire mieux .. Mais déjà vous aurez une idée plus nette de ce que j'ai comme souci .. J'espère que ça pourra vous aider..


upload/36733-screen.jpg
Bonjour, l'image nous aide à constater ton problème mais pour t'aider on a vraiment besoin du code....
Désolé, mais moi, ça ne m'aide pas beaucoup. Smiley decu

Pourrais-tu nous en dire un peu plus, car on ne voit pas très bien où se situe ton image là-dedans (celle que tu décrivais dans ton post initial). Est-ce le fond gris foncé qu'on aperçoit derrière les cadres arrondis "texte", "image" ...?

Quelle taille a cette image? Tu la répètes verticalement, mais qu'en est-il de la répétition horizontale?

Déjà, je ne comprends pas très bien ta classe pour le body Smiley rolleyes
Modifié par lddsoft (21 Mar 2011 - 11:12)
Désolé,

Je vous avoue que moi non plus je reprends le truc de quelqu'un ..

Donc je vais essayé d'éclaircir plus :

l'image que je dois centrer et que vous pouvez voir c'est le BG gris et blanc ( texturé ) qui ne font qu'un, l'image doit faire plus de 2000 ou 3000px de large ( donc ils considèrent qu'il n'y a pas besoin de la répéter verticalement ) et elle est directement en background du body après ils ont voulu ajouté une "class" qui est page_accueil.. voilà en gros..

On pourrait résumé ça à :

<html>
<head>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

body {
	color: #999999;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

.page_accueil {
    background: url('../img/bg_accueil.png') center repeat-y;
}

</style>
</head>
<body class="page_accueil">
</body>
</html>



Et normalement nous aurions le meme souci.. mais que sur IE6 et IE7 qui ne prends pas le background position center et qui cale tout a gauche
La classe pour le body c'est qu'ensuite le site n'est plus disposé comme ça du tout, c'est une pré-accueil du coup ils ont voulu je suppose faire une séparation entre le body pré-accueil ( en mettant une class ) et le body du site en général ..
J'allais aussi parler du doctype, car il pourrait y avoir une différence entre HTML 4.01 et XHTML.
Ici, il n'y a pas de doctype dans l'exemple.
Modifié par lddsoft (21 Mar 2011 - 11:34)
Oui c'est normal je viens de le taper vite fait Smiley smile histoire que vous imaginiez rapidement le truc Smiley cligne 


<!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'>
On m'a dit que ceci pouvait venir du fait que les navigateurs plus ancien ne comprennent pas les class sur le body, il faudrait une div pour le bg qui englobe la page rien que pour ces navigateurs ou l'appliquer directement sur le body..
lddsoft a écrit :
J'allais aussi parler du doctype, car il pourrait y avoir une différence entre HTML 4.01 et XHTML.
Il me semblais déjà te l'avoir fait remarquer. Doctype html ou xhtml, même combat, aucun risque de différence... Les problèmes d'affichage lié au doctype sont uniquement dus à l'absence de doctype ou à une erreur dans sa rédaction.

Dans le cas de l'xhtml c'est le fait de servir un document en application/xhtml+quelquechose qui peut avoir un impact sur IE. MAIS La plupart du temps les documents sont servis en text/html (donc en gros pas du tout en xhtml) (ce qui est plus un mésusage du doctype qu'autre chose, mais ce n'est pas le sujet).


bastien211 a écrit :
On m'a dit que ceci pouvait venir du fait que les navigateurs plus ancien ne comprennent pas les class sur le body, il faudrait une div pour le bg qui englobe la page rien que pour ces navigateurs ou l'appliquer directement sur le body..
Euh... non... peu de chances, ou alors en combinaison avec un autre problème.
Bonjour,

il est dommage de ne pas avoir de code pour pouvoir t'aider...

par contre, moi en voyant ton image et ce que tu as tapé " vite fait ", je dirai que tu souhaites que ta page ait une largeur bien définie et soit centrée pour les plus grosses résolutions.

Une taille sur le body ferrait, pour moi, l'affaire, il se centrerait dans ta page, et donc son background avec.

Tu as surement un div ( ou un tableau ) qui contient le reste de ta page pour que celui-ci soit centré dans ton navigateur.
Modifié par n3k0 (21 Mar 2011 - 15:10)
Oui c'est dommage .. sinon je vous enverrez directement le lien ..

En fait je veux que le BG soit centré sur tous les écrans donc on mets une image a une résolution qu'aucun n'écran ( ou sinon très très très peu ) ne peut supporter tellement que c'est grand et hop on la centre ( ou pas apparamment Smiley smile ) et on vire le overflow horizontal..

Oui il y a une div qui englobe le contenu : texte, image, etc ..
Tu voudrais appliqué le BG directement sur cette div ? plutot que le body ?

En définissant une taille pour le body je risque d'avoir des soucis au niveau des écrans nan ? ou c'est le même principe que ce que je fais ?

@Laurie-anne : Ok je ne m'attendrais pas à un miracle en testant cette méthode alors Smiley smile
Modifié par bastien211 (21 Mar 2011 - 21:07)
Pages :
Sujet clos
Aller à