28173 sujets

CSS et mise en forme, CSS3

[RÉSOLU] Position fixed compatibilité avec IE

Bonjour à tous,

J'ai une question sur mon code qui, apparemment avec Mac FF, Camino, Opéra, Safari et FF et Explorer et windows xp fonctionne très bien. Je suis sur Mac et je ne peux pas vérifier avec windows (excepté windows xp)

Mon code actuel :

body {
color: #333366;
background: #e6e6d9 url('../fond2.jpg') no-repeat fixed;
background-position: 50% 0%;
font-family:Geneva, Arial, Helvetica, sans-serif; font-size:.9em;
height: 100%;
width: 100%;
text-align:center;
}


Il me semblait qu'il y avait un hack pour ie avec la position fixed.
genre : html>body {position:fixed}

Qu'en pensez-vous ?

Ma page web :
http://ppzx.net/gestaltdos/gestalt.php5
Merci d'avance
Modifié par pierreandre (04 May 2007 - 02:00)
Bonjour.

Premièrement le sujet n'est pas dans la bonne catégorie.
Deuxièmement je ne vois pas ce que tu essayes de faire mais ce que je peux te dire c'est qu'IE ne connaît pas le sélecteur CSS ">" donc c'est un hack mais les hacks c'est pas bien si tu as vraiment besoin de préciser quelque chose à IE alors utilise les commentaires conditionnels.
Bonjour,
Merci de ta réponse rapide.

D'après toi, dans quel forum j'aurais dû poster ce message ?

Ce que j'essaie de réaliser c'est que mes pages défilent sur la photo en fond avec le plus de navigateurs possible.
Ce qui me surprend beaucoup, c'est qu'avec ce codage, ça fonctionne avec des pages qui sont dans le même répertoire et avec le même navigateur et d'autres non !

À part ça, je ne vois pas ou tu vas chercher ta morale du «hack» pour un navigateur qui ne respecte pas grand chose. Mais si tu veux bien me parler des commentaires conditionnels, je suis preneur.

Si tu as une réponse qui marche, je serai heureux de l'utiliser.

Voici une autre tentative de ma part qui est valide W3C :
body{
top: 0;
color: #333366;
background: #e6e6d9 url('../fond2.jpg') no-repeat fixed;
background-position: 50% 0;
font-family:"Georgia", Times, "Times New Roman", Palatino, serif;font-size:.9em;
height: 100%;
width: 100%;
text-align:center;
overflow:auto;
}
* html body {position:absolute;}

Avec ça, les pages 'gestalt' et 'interruption' sont correctes avec Safari, Camino, Opéra 9.2.0, FF (Mac et windows xp)
http://ppzx.net/gestaltdos/gestalt.php5
http://ppzx.net/gestaltdos/interruption.php5

Amitiés, pierreandre

P.S. Finalement, je crois que c'est la meilleure option pour moi, après avoir essayé d'autres options durant plus d'une journée.
Je ne sais pas ce que cela donne sur les version windows autres que celle de XP.
Tant pis pour windows. Comme je ne crois pas que cette insuffisance de windows soit seulement liée à son incompétence, alors je choisis ceux qui respectent le W3C.
Amitiés, pierreandre
Modifié par pierreandre (03 May 2007 - 16:31)
Bonjour CNeo,

J'ai trouvé une autre solution qui me paraît intéressante. C'est celle de
http://www.nanoum.net/blog/6_absolue_et_fixe.html

Elle a aussi un bug chez moi...
Alors je ne tiens pas à perdre plus de temps sur une insuffisance... incompétence... ou autre «axe du mal» comme dirait un autre américain.

Et merci encore pour tes interventions !
Amitiés, pierreandre
Modifié par pierreandre (03 May 2007 - 16:37)
Cette solution me parait correcte ( bien que je n'ai pas testé ) à l'exception des hacks. Il vaut mieux faire la même chose avec les commentaires conditionnels.

Utilise ça pour créer deux feuilles de styles différentes :
<!--[if lt IE 7]>
<link href="ie-less-than-ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gte IE 7]> <-->
<link href="modern-browsers.css" rel="stylesheet" type="text/css" />
<!--> <![endif]-->


Dis-moi s'il y a quelque chose que tu ne comprends pas. Je suis de nouveau en retard ... Smiley biggol
Bonjour CNeo,

Tu peux bien être en retard, avec tout le travail supplémentaire que tu accomplis !

Merci pour tes commentaires conditionnels et pour les 2 feuilles de style.
Les voici : 'ie-less-than-ie7.css'
@charset "iso-8859-1";

<!--[if lt IE 7]>

<link href="ie-less-than-ie7.css" rel="stylesheet" type="text/css" />

<!  -->
<style type="text/css">
#fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + '2px' );
  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + '2px' );
}
</style>
<![endif]>
<![endif]-->
html, body {
height: 100%;	width: 100%; overflow: auto; 
background-position: 50% 0;
}
body {
background-color:#e6e6d9;
position: absolute;
background: url('../fond2.jpg') no-repeat fixed;
background-position: 50% 0;
font-family:"Georgia", Times, "Times New Roman", Palatino, serif;font-size:.9em;
height: 100%;
width: 100%;
text-align:center;
 top: 0; 
 left: 0;
}
Cela me semble parfait pour Camino, Safari, Mozilla, Opéra 9.2.0 et pour windows xp. Je n'ai pas testé avec les autres.

Je te remercie encore et je vais écrire 'résolu' au post,
Bien sûr, si tu vois encore une (ou plusieurs) erreur(s) je te prie de me les signaler.
Et puis merci aussi de m'avoir appris les commentaires conditionnels dont je n'avais jamais entendu parler.
Ce coup-là les liens redeviennent :
http://ppzx.net/gestaltdos/gestalt.php5
http://ppzx.net/gestaltdos/interruption.php5
Et les autres du même dossier.

Amitiés, pierreandre
Modifié par pierreandre (04 May 2007 - 17:36)
Juste une remarque, je ne sais pas ce que le W3C recommande mais personnellement je trouve que perdre de la place en écrivant les propriétés du background une par une est inutile donc je les regroupe.

Enfin le week-end, je ne suis plus en retard. Smiley lol
Bonjour CNeo,

Tu as encore raison pour regrouper les propriétés du background. Je le faisais et j'ai lu que dans un cas (je n'ai pas la référence. Opéra peut-être) il fallait séparer les propriétés.

Si ça t'intéresse et si tu veux bien me corriger, j'ai encore trouvé ceci pour les commentaires conditionnels (ie-less-than-ie7.css):
http://www.howtocreate.co.uk/fixedPosition.html
Dans mon cas cela donnerait je crois :
@charset "iso-8859-1";

<!--[if lt IE 7]>

<link href="ie-less-than-ie7.css" rel="stylesheet" type="text/css" />

<!  -->
<style type="text/css">
#fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + '2px' );
  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + '2px' );
}
</style>
<![endif]>
<![endif]-->
html, body {
height: 100%;	width: 100%; overflow: auto; 
background-position: 50% 0;
}
body {
background-color:#e6e6d9;
position: absolute;
background: url('../fond2.jpg') no-repeat;
background-position: 50% 0;
font-family:"Georgia", Times, "Times New Roman", Palatino, serif;font-size:.9em;
height: 100%;
width: 100%;
text-align:center;
 top: 0; 
 left: 0;
}
Pour les points d'interrogation lire endif entre les 'crochets' [_et ]_,
Profite de ton week-end et merci de ton message.
Amitiés, pierreandre
Modifié par pierreandre (04 May 2007 - 17:38)
Bonjour CNeo,

Par technique, veux-tu dire les propriétés du background ou l'écrit de 'ie-less-than-ie7.css'... Parce que je ne suis pas du tout sûr de moi, pour l'écrit de la feuille de style pour IE. C'est un peu, pas mal, un ramassis de 'copier coller' de google.

Si tu as le temps de corriger, j'aimerais beaucoup.
Pour les propriétés, je vais chercher la référence et je l'afficherai.

Passe un excellent week-end.
Amitiés, pierreandre
Modifié par pierreandre (05 May 2007 - 17:23)
Bonjour à tous,

Pour conclure ce post, je suis revenu au code lu par les navigateurs modernes et par ie7 avec windows xp :
body{
top: 0;
background-color:#e6e6d9;
background-image: url('../fond2.jpg');
background-attachment : fixed; 
background-position: 50% 0;
background-repeat: no-repeat;
font-family:"Georgia", Times, "Times New Roman", Palatino, serif;font-size:.9em;
text-align:center;
}
Amitiés, pierreandre
Modifié par pierreandre (08 May 2007 - 22:59)
Sujet clos
Aller à