[Résolu]Position fixed sous IE ?

Express · Message par **Express** » 09 oct. 2004, 09:03

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;
}

calimo · Message par **calimo** » 09 oct. 2004, 09:57

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 :

Code : Tout sélectionner

.blocmenuDroite {/* Conteneur du menu*/
margin-top:150px;
background-color: #F5F8FC;
position: absolute;
right:10px;
width: 120px;
height: auto;
}

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 :

Code : Tout sélectionner

[class="blocmenuDroite"] {
position:fixed;
}

ou un sélecteur d'enfant :

Code : Tout sélectionner

html>body .blocmenuDroite {
position:fixed;
}
ou
body>.blocmenuDroite
position:fixed;
}
(si blocmenuDroite est un enfant direct de body)

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 :

Code : Tout sélectionner

.blocmenuDroite {/* Conteneur du menu*/
margin-top:150px;
background-color: #F5F8FC;
position:fixed!important;
position: absolute;
right:10px;
width: 120px;
height: auto;
}

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

)

Express · Message par **Express** » 09 oct. 2004, 10:06

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

jv2759 · Message par **jv2759** » 09 oct. 2004, 11:45

sinon tu peux essayer ceci également :

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

calimo · Message par **calimo** » 09 oct. 2004, 13:14

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.

martin · Message par **martin** » 09 oct. 2004, 14:47

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.

calimo · Message par **calimo** » 09 oct. 2004, 14:53

Ah ben oui tiens... il va falloir que je revoie mes classiques...

Je dois dire que je n'ai pas utilisé souvent ce hack.

calimo · Message par **calimo** » 09 oct. 2004, 22:17

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

jv2759 · Message par **jv2759** » 09 oct. 2004, 22:32

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

calimo · Message par **calimo** » 09 oct. 2004, 22:36

Pourquoi un compromis ? Dans quel but ?

jv2759 · Message par **jv2759** » 09 oct. 2004, 22:40

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...

calimo · Message par **calimo** » 09 oct. 2004, 22:48

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]

)

martin · Message par **martin** » 09 oct. 2004, 23:10

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

calimo · Message par **calimo** » 10 oct. 2004, 10:48

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...

martin · Message par **martin** » 10 oct. 2004, 14:55

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.

Geckozone

[Résolu]Position fixed sous IE ?

[Résolu]Position fixed sous IE ?

Qui est en ligne ?