Geckozone

Salut tout'lmonde
Bon je cherche à executer une position "Fixed" sur un meu très simple,fonctionnant sous FF et Ie en même temps,mais je n'y arrive pas,quelqun pourrait-il me conseiller
Merci .Car si je place cette position sur mon "blocmenuDroite",cela me décale l'ensemble sous IE et ca fait n'importe quoi...
Extrait de fichier CSS :
/* Document CSS de Charmeds'Star*/
body {
margin: 5px;/* Marge du corps*/
font-family: comic sans ms, arial, sans-serif; /* Police de base de la page */
font-size: 12px; /* Taille de la police Général*/
background-color: #F5F8FC;
}
.centre {
margin-right: 135px;
width: 700px;
height: 337px;
margin-top: 5px;
}
.blocmenuDroite {/* Conteneur du menu*/
margin-top:150px;
background-color: #F5F8FC;
position: absolute;
right:10px;
width: 120px;
height: auto;
}
.menu1 { /*Premier Menu */
margin-top: 2px;
width: 120px;
border: 1px solid #060C6F;
background-color: #F5F8FC;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
.menu2 { /*Second Menu*/
margin-top: 2px;
width: 120px;
border: 1px solid #060C6F;
background-color: #F5F8FC;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
.menu3 { /*Troisième Menu*/
margin-top: 2px;
width: 120px;
border: 1px solid #060C6F;
background-color: #F5F8FC;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
.menu4 { /*Quatrième Menu*/
margin-top: 2px;
width: 120px;
border: 1px solid #060C6F;
background-color: #F5F8FC;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
ul,li { /*Style des menus */
list-style-type: none; /* pour ne pas avoir de puces */
margin: 0;
padding:0;
line-height: 17px; /* interligne */
}
h1 { /*Style des Titres */
font-size: 24px;
text-align: left;
}
h2 {/*Style des sous-titres*/
font-size: 100%;
text-align: left;
}

IE ne connait pas la position:fixed; donc il passe en mode d'erreur et applique correctement la position:relative;

Donc il ne faut pas que IE entende parler de cette position fixe, mais tu dois lui dire que c'est de l'absolue. Pour ça, un hack s'impose.

Tu lui dit que c'est en absolute, tu définit tout le reste en même temps : Ensuite c'est là qu'intervient le hack, tu dois utiliser un sélecteur que IE ne comprend pas, qu'il va donc ignorer, mais que tous les autres navigateurs comprendront, par exemple sélecteur d'attribut : ou un sélecteur d'enfant :Ainsi IE n'entendra pas parler de position fixe et ne mettra pas le bloc en relative.
Il existe une autre possibilité utilisant le fait que IE ne connait pas la règle !important :IE va voir la position fixe, mais ignore l'!important, puis l'absolue, et comme c'est la dernière il l'applique.
Les autres navigateur verront l'!important et n'appliqueront pas l'absolue

Voilà, c'est simple non ?

PS : ne sombre pas dans la classite aigüe De plus je craint à voir ce code que tu ne souffre aussi d'une divite chronique (et moi d'une strictie aveugle )

Là,je remarque la "PAPATe" du pro ....

sinon tu peux essayer ceci également :

http://www.geckozone.org/forum/viewtopi ... ight=fixed

Le problème c'est que c'est invalide de mettre _position:fixed;... qui sait comment réagiront KHTML (Konqueror ou safari) ou bien Opera ?... ces navigateurs sont en général plus tolérants que Mozilla.

Dans un souci de précision, et parce que ce n'est pas la première fois que je vois cette erreur:

IE va voir la position fixe, mais ignore l'!important

IE connait et applique le fait de mettre !important à une propriété.
exemple

Dans le cas présent, le css de calimo marche, mais parce que IE ne connait pas la propriété position fixed (et pas parce qu'il ne connait pas !important), et donc il applique la position absolute qui lui est proposé ensuite.

Ah ben oui tiens... il va falloir que je revoie mes classiques...
Je dois dire que je n'ai pas utilisé souvent ce hack.

Au passage je viens de tomber sur une manière de simuler la position fixe dans IE
http://www.ibilab.net/webdev/articles/C ... eurs-2.htm

C'est vraiment bien conçu !
Mais, car il y a un mais, ça pose des problèmes si on veut scroller avec le bouton central dans Firefox... si on clique dans la page c'est fichu

Mais bon, ça vaut la peine d'aller voir 8)
Franchement je n'en reviens toujours pas

calimo a écrit :Au passage je viens de tomber sur une manière de simuler la position fixe dans IE
http://www.ibilab.net/webdev/articles/C ... eurs-2.htm

Il faudrait voir si on peux pas faire un compromit avec ton !important

Pourquoi un compromis ? Dans quel but ?

calimo a écrit :Mais, car il y a un mais, ça pose des problèmes si on veut scroller avec le bouton central dans Firefox... si on clique dans la page c'est fichu

C'est quand même con de géner la naviguation à cause d'un naviguateur pourie...

Ah oui, mais alors ça commence à devenir compliquer s'il faut faire deux CSS à cause d'un navigateur pourri

Mais plus simple qu'avec le !important, on peut faire ça comme le box model (à comparer dans IE et un non-IE ... en fait au début j'ai cru qu'il jouait sur le box model mais en fait pas du tout c'est un simple sélecteur d'attribut body[id=css-zen-garden] )

trés malin !

si on clique dans la page c'est fichu

Pas à partir de l'exemple du premier lien en relation sur la page que tu nous files, calimo.
A regarder de plus près...

Merci pour l'info

C'est un problème de focus, en cliquant sur un des liens du contenu sans le suivre (juste l'activer), le focus revient et la page peut de nouveau scroller à la molette.
Dans Opera ça scrolle pas du tout.

Il faudrait voir en ajoutant un -moz-focus ou quelque chose comme ça...

Il faudrait voir en ajoutant un -moz-focus ou quelque chose comme ça...

J'ai pensé exactement la même chose au premier abord. Mais sur un lien en relation proposé,
(http://devnull.tagsoup.com/fixed/original.html), il n'y en a pas besoin!
A approfondir donc.