Position: fixed ne fonctionne pas avec IE7
DixieRock
Messages postés
17
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'ai créé un menu en haut de mon site que j'ai positionné avec Position: fixed dans les CSS afin qu'il soit toujours visible.
Ça marche sans soucis avec Firefox mais pas avec IE7 sur mon PC.
J'ai pourtant lu ici ou là que si jusqu'à IE6, IE ne comprenait pas fixed, le problème était résolu avec IE7 qui interprète bien fixed.
Est-ce que ça fonctionnerait chez vous ?
Et surtout pourquoi est-ce que ça ne fonctionne pas chez moi ?
Le site : https://www.lachelidoine.fr/
Voici la partie CSS relative au menu
#menu {
position: fixed;
top: -6px;
left: 0;
z-index: 100;
width: 100%;
font-size: 90%;
color: #FFCC00;
background-color: #969696;
background-image: url("../Photos/Public.jpg");
font-family: Times New Roman,Times,serif;
border-top: 1px solid #FFCC00;
padding-top: 12px;
border-bottom: 1px solid #FFCC00;
padding-bottom: 5px;
}
Merci d'avance.
Luc
J'ai créé un menu en haut de mon site que j'ai positionné avec Position: fixed dans les CSS afin qu'il soit toujours visible.
Ça marche sans soucis avec Firefox mais pas avec IE7 sur mon PC.
J'ai pourtant lu ici ou là que si jusqu'à IE6, IE ne comprenait pas fixed, le problème était résolu avec IE7 qui interprète bien fixed.
Est-ce que ça fonctionnerait chez vous ?
Et surtout pourquoi est-ce que ça ne fonctionne pas chez moi ?
Le site : https://www.lachelidoine.fr/
Voici la partie CSS relative au menu
#menu {
position: fixed;
top: -6px;
left: 0;
z-index: 100;
width: 100%;
font-size: 90%;
color: #FFCC00;
background-color: #969696;
background-image: url("../Photos/Public.jpg");
font-family: Times New Roman,Times,serif;
border-top: 1px solid #FFCC00;
padding-top: 12px;
border-bottom: 1px solid #FFCC00;
padding-bottom: 5px;
}
Merci d'avance.
Luc
A voir également:
- Position: fixed ne fonctionne pas avec IE7
- Ma position - Guide
- Suivi position google - Guide
- Partage position whatsapp - Guide
- Position gps - Guide
- Comment envoyer sa position par sms - Accueil - Téléphones
12 réponses
salut,
commence par mettre une DTD correcte, stp.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
commence par mettre une DTD correcte, stp.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Bon, puisque la chanteuse est une flémarde :
Dans ton code, on lit ceci :
Qui arrive APRES la déclaration de la feuille de style initiale. Outre le fait que c'est pas très règlementaire... une feuille de style est normalisée avec une extension .css... ce code signifie :
Si je (navigateur) suis Internet Explorer, quelque soit sa version, je dois utiliser la feuille de style styles/lchIE
Or, dans cette feuille de style on y lit :
Ces propriétés écrasent
des déclarations globales.
Conclusion :
IE7 prend la position absolute, IE7 ne peut pas avoir le menu fixe s'il est déclaré absolute, IE7 ne peut pas avoir le menu fixe en haut de page ... je radote, mais c'est pour être sur que le message passe bien :o)
Les commentaires conditionnels
[EDIT] TSSS, sale bête ...
Dans ton code, on lit ceci :
<!--[if IE]><link media="all" rel="stylesheet" href="styles/lchIE" type="text/css"> <![endif]-->
Qui arrive APRES la déclaration de la feuille de style initiale. Outre le fait que c'est pas très règlementaire... une feuille de style est normalisée avec une extension .css... ce code signifie :
Si je (navigateur) suis Internet Explorer, quelque soit sa version, je dois utiliser la feuille de style styles/lchIE
Or, dans cette feuille de style on y lit :
#menu {
position: absolute;
left: -40px;
}
Ces propriétés écrasent
#menu {
position: fixed;
/* .... */
}
des déclarations globales.
Conclusion :
IE7 prend la position absolute, IE7 ne peut pas avoir le menu fixe s'il est déclaré absolute, IE7 ne peut pas avoir le menu fixe en haut de page ... je radote, mais c'est pour être sur que le message passe bien :o)
Les commentaires conditionnels
[EDIT] TSSS, sale bête ...
Je ne suis pas très calé sur ces DTD.
J'ai essayé de mettre ce que tu proposes
- Sous IE7, pas de changement
- Sous Firefox, je perds mon fond et mon menu.
Je suis donc revenu à ma "mauvaise" DTD !
J'ai essayé de mettre ce que tu proposes
- Sous IE7, pas de changement
- Sous Firefox, je perds mon fond et mon menu.
Je suis donc revenu à ma "mauvaise" DTD !
pour la DTD, tu peux lire cet article.
tu y liras qu'il vaut mieux y faire attention…
pour le reste, sous FF je ne vois rien de problématique.
quels sont les symptômes exacts ?
tu y liras qu'il vaut mieux y faire attention…
pour le reste, sous FF je ne vois rien de problématique.
quels sont les symptômes exacts ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Sous Firefox, pas de problème avec la "mauvaise" DTD (c'est celle qui est en ligne), c'est avec la DTD correcte que ça ne fonctionnait pas !
C'est sous IE7 que ça déconne, mon menu en haut ne reste pas en haut de page (contrairement à FF) quand on descend en bas de la page.
C'est sous IE7 que ça déconne, mon menu en haut ne reste pas en haut de page (contrairement à FF) quand on descend en bas de la page.
pfff…
pas marrant comme problème !
-;o)
le premier problème c'est que tu as un code sans DTD (et crois pas, c'est pas un détail) et en plus tu as des erreurs de code.
là dessus tu colles une balise propriétaire (<marquee>) et un menu positionné avec une règle de style pas encore totalement implémentée…
tu l'as fait exprès pour nous coller ?
-:oD
pas marrant comme problème !
-;o)
le premier problème c'est que tu as un code sans DTD (et crois pas, c'est pas un détail) et en plus tu as des erreurs de code.
là dessus tu colles une balise propriétaire (<marquee>) et un menu positionné avec une règle de style pas encore totalement implémentée…
tu l'as fait exprès pour nous coller ?
-:oD
tu pourras remercier Gryzzly qui vient de me donner la réponse…
tu as un commentaire conditionnel qui cible toutes les versions de IE :
et qui fait appliquer le style suivant :
donc…
ça risque pas de rester "fixed" !
-;o)
tu as un commentaire conditionnel qui cible toutes les versions de IE :
<!--[if IE]> <link media="all" rel="stylesheet" href="styles/lchIE" type="text/css"> <![endif]-->
et qui fait appliquer le style suivant :
#menu {
position: absolute;
left: -40px;
}
.menu li ul{
filter:alpha(opacity=100);
width: 170px;
}
.Creation{margin-left: -70%;}
.Formation{ margin-left: -82%;}
.Theatre{ margin-left: -69%;}
.Administration{ margin-left: -74%;}
.Histoire{ margin-left: -91%;}
donc…
ça risque pas de rester "fixed" !
-;o)
Oui, c'est vrai, je me souviens que j'avais mis ça il y a quelques mois avec une version précédente du menu... et j'avais oublié. Alors là, je me sens vraiment con... Je l'ai enlevé... mais rien ne change !
Bon, à part ça, je vais tenir compte de vos différentes remarques. (Il n'y a guère qu'un an que je me suis lancé dans la construction de sites et je vois que j'ai encore bien des lacunes.)
- sur la DTD. Je pense que le problème vient de la balise marquee. J'essayerais de trouver une solution alternative.
- les erreurs de code doivent venir aussi de cette partie car je viens de repiquer ce bout de code trouvé sur le net et je ne l'avais pas testé avec le validateur.
- Je vais normaliser mes feuilles de style en .css
Par contre, je ne comprends pas ce que veut dire la remarque "un menu positionné avec une règle de style pas encore totalement implémentée… "
Merci pour l'aide en tout cas.
Bon, à part ça, je vais tenir compte de vos différentes remarques. (Il n'y a guère qu'un an que je me suis lancé dans la construction de sites et je vois que j'ai encore bien des lacunes.)
- sur la DTD. Je pense que le problème vient de la balise marquee. J'essayerais de trouver une solution alternative.
- les erreurs de code doivent venir aussi de cette partie car je viens de repiquer ce bout de code trouvé sur le net et je ne l'avais pas testé avec le validateur.
- Je vais normaliser mes feuilles de style en .css
Par contre, je ne comprends pas ce que veut dire la remarque "un menu positionné avec une règle de style pas encore totalement implémentée… "
Merci pour l'aide en tout cas.
Alors là, je me sens vraiment con... Je l'ai enlevé... mais rien ne change !
si rien ne change, c'est pas à toi de te sentir con !
-:oD
sur la DTD. Je pense que le problème vient de la balise marquee. J'essayerais de trouver une solution alternative.
ça a pas de rapport.
je viens de repiquer ce bout de code trouvé sur le net
oui c'est XHTML dans du HTML (toutes les erreurs de balise fermante en "/>", "short tag").
et pour ma remarque c'est que :fixed est tout juste reconnu par IE et je ne leur fais pas des masses confiance pour qu'il le fasse bien du premier coup…
-:oD
si rien ne change, c'est pas à toi de te sentir con !
-:oD
sur la DTD. Je pense que le problème vient de la balise marquee. J'essayerais de trouver une solution alternative.
ça a pas de rapport.
je viens de repiquer ce bout de code trouvé sur le net
oui c'est XHTML dans du HTML (toutes les erreurs de balise fermante en "/>", "short tag").
et pour ma remarque c'est que :fixed est tout juste reconnu par IE et je ne leur fais pas des masses confiance pour qu'il le fasse bien du premier coup…
-:oD
Bon, je n'ai pas trop le temps de m'y replonger avant mardi prochain mais j'ai fait quelques tentatives.
D'où il ressort :
1) que le non fonctionnement sous Firefox de la DTD correcte <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> vient du fait que mes feuilles de styles n'avaient pas l'extension .css
2) qu'avec la DTD correcte et en enlevant le position absolute dans la feuille de style IE, le fixed fonctionne sous IE7.
Je vous tiendrais au courant. Merci encore.
PS : je me souviens pourquoi j'avais mis position: absolute sous IE : mon menu déconnait sous IE sinon (décalage sur la droite plus d'autres désagréments).
(Et je suis quand même con de ne plus y avoir pensé. ça ne risquait pas de marcher)
D'où il ressort :
1) que le non fonctionnement sous Firefox de la DTD correcte <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> vient du fait que mes feuilles de styles n'avaient pas l'extension .css
2) qu'avec la DTD correcte et en enlevant le position absolute dans la feuille de style IE, le fixed fonctionne sous IE7.
Je vous tiendrais au courant. Merci encore.
PS : je me souviens pourquoi j'avais mis position: absolute sous IE : mon menu déconnait sous IE sinon (décalage sur la droite plus d'autres désagréments).
(Et je suis quand même con de ne plus y avoir pensé. ça ne risquait pas de marcher)
Bonjour,
J'ai corrigé les DTD et les extensions .css ainsi que ma feuille de style styles/lchIE et tout est ok maintenant au niveau du fonctionnement du fixed sous IE : le menu reste fixe quand on descend sur la page.
Donc, un grand merci à vous.
Maintenant, j'ai des erreurs de codes décelées par le validateur :
- principalement pour la partie relative au slideshow du menu entre les balises <marquee> : par exemple Error: there is no attribute ONMOUSEOVER for this element (in this HTML version). Est-ce qu'il y a un remède simple ou faut-il trouver un code alternatif sans les <marquee> ?
- J'ai "Error: there is no attribute BORDER for this element (in this HTML version)", une erreur que je n'avais pas auparavant. C'est ligne 162 de la page https://www.lachelidoine.fr/
Je ne comprends pas car si je duplique la ligne de code, j'ai une erreur sur la 1ère ligne mais pas sur la seconde. D'où peut venir le problème ,
- Ligne 175 de la même page, j'ai un lien externe qui me procure de nombreuse erreurs : href="https://www.correze.fr/nos-missions/culture-patrimoine-sports/le-chateau-de-sedieres?id_sdomaine=946&v_lang=FR&Sous_dom_ref=0&id_dom=940&domaine_pos=2&choix_rubrique=4&sdom_pos=1&titre_sdomaine=Le%20programme&titre_sdomaine_stat=Le%20programme&rubrique=Op%e9ra"
avec par exemple une erreur "unknown entity v_lang"
Le problème vient-il des "&" dans le lien et faut il remplacer ça par & ?
Voilà quelques-unes des erreur. Si vous avez quelques idées...
Bye.
Luc
J'ai corrigé les DTD et les extensions .css ainsi que ma feuille de style styles/lchIE et tout est ok maintenant au niveau du fonctionnement du fixed sous IE : le menu reste fixe quand on descend sur la page.
Donc, un grand merci à vous.
Maintenant, j'ai des erreurs de codes décelées par le validateur :
- principalement pour la partie relative au slideshow du menu entre les balises <marquee> : par exemple Error: there is no attribute ONMOUSEOVER for this element (in this HTML version). Est-ce qu'il y a un remède simple ou faut-il trouver un code alternatif sans les <marquee> ?
- J'ai "Error: there is no attribute BORDER for this element (in this HTML version)", une erreur que je n'avais pas auparavant. C'est ligne 162 de la page https://www.lachelidoine.fr/
Je ne comprends pas car si je duplique la ligne de code, j'ai une erreur sur la 1ère ligne mais pas sur la seconde. D'où peut venir le problème ,
- Ligne 175 de la même page, j'ai un lien externe qui me procure de nombreuse erreurs : href="https://www.correze.fr/nos-missions/culture-patrimoine-sports/le-chateau-de-sedieres?id_sdomaine=946&v_lang=FR&Sous_dom_ref=0&id_dom=940&domaine_pos=2&choix_rubrique=4&sdom_pos=1&titre_sdomaine=Le%20programme&titre_sdomaine_stat=Le%20programme&rubrique=Op%e9ra"
avec par exemple une erreur "unknown entity v_lang"
Le problème vient-il des "&" dans le lien et faut il remplacer ça par & ?
Voilà quelques-unes des erreur. Si vous avez quelques idées...
Bye.
Luc
salut,
there is no attribute ONMOUSEOVER for this element
<marquee> est une balise "propriétaire", c-à-d qu'elle a été définie par et pour Microsoft.
et donc elle n'apparait pas dans la DTD…
tu peux simplement ignorée cette erreur ou alors passer en "transitional" ça devrait marcher.
(ou mieux, pas de balise <marquee> !)
there is no attribute BORDER for this element
il faut transformer
en :
ou encore mieux, dans la CSS :
une erreur que je n'avais pas auparavant
sans doute parce que tu es en "strict" et que tu ne l'étais pas avant.
unknown entity v_lang
dans le code, le navigateur essaie d'interpréter tout ce qui commence par "&" comme une entité HTML.
comme tu veux utiliser &, il faut le coder en son entité équivalente "&".
en tout cas, bravo !
there is no attribute ONMOUSEOVER for this element
<marquee> est une balise "propriétaire", c-à-d qu'elle a été définie par et pour Microsoft.
et donc elle n'apparait pas dans la DTD…
tu peux simplement ignorée cette erreur ou alors passer en "transitional" ça devrait marcher.
(ou mieux, pas de balise <marquee> !)
there is no attribute BORDER for this element
il faut transformer
border="0px solid"
en :
style="border-style:none;"
ou encore mieux, dans la CSS :
a img{
border-style:none;
}
une erreur que je n'avais pas auparavant
sans doute parce que tu es en "strict" et que tu ne l'étais pas avant.
unknown entity v_lang
dans le code, le navigateur essaie d'interpréter tout ce qui commence par "&" comme une entité HTML.
comme tu veux utiliser &, il faut le coder en son entité équivalente "&".
en tout cas, bravo !
