Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS et InternetExplorer

CSS et InternetExplorer

39 réponses
Avatar
alainL
Bonjour,
Je bataille encore avec mon essai de menu déroulant :-(
Sur cette page, ( http://alos-sibas-abense.com/bulletins2.php) les
sous-menus de l'onglet "albums" s'affichent et sont actifs avec Chrome
et Ffx mais avec mon IE 8, seul le premier sous-menu est accessible. La
tentative d'atteindre les deux autres ferme l'ensemble des sous-menus.
Help please !
--
AlainL

http://autourdalos.fr
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4
Avatar
Eric Demeester
Bonjour,

alainL (Sun, 22 Mar 2015 17:34:38 +0100 -
fr.comp.infosystemes.www.auteurs) :

Bon, maintenant ça donne quoi sur IE6,IE7.. Je ne sais pas.



Pour savoir, il existe un site permettant de tester en ligne le rendu
avec les différentes versions d'IE, de la 5.5 à la 11 :
http://netrenderer.com/

Tu sélectionnes la version, tu lui donnes l'URL à tester, tu cliques sur
le bouton « Render » et voila. Magique.
Avatar
alainL
Le 22/03/2015 21:24, Eric Demeester a écrit :
Bonjour,

alainL (Sun, 22 Mar 2015 17:34:38 +0100 -
fr.comp.infosystemes.www.auteurs) :

Bon, maintenant ça donne quoi sur IE6,IE7.. Je ne sais pas.



Pour savoir, il existe un site permettant de tester en ligne le rendu
avec les différentes versions d'IE, de la 5.5 à la 11 :
http://netrenderer.com/

Tu sélectionnes la version, tu lui donnes l'URL à tester, tu cliques sur
le bouton « Render » et voila. Magique.



Merci... mais on dirait bien qu'il ne déroule pas le menu ( la
"perception" du survol par la souris et d'un clic sur un lien est
désactivée)
J'ai essayé toutes les versions de IE proposées, y compris la 8 qui
marche chez moi et pas avec ce test.

--
AlainL

http://autourdalos.fr
Avatar
Eric Demeester
Bonjour,

alainL (Sun, 22 Mar 2015 23:40:46 +0100 -
fr.comp.infosystemes.www.auteurs) :

J'ai essayé toutes les versions de IE proposées, y compris la 8 qui
marche chez moi et pas avec ce test.



Quelques remarques génériques ne concernant pas directement ton
problème, mais qui peuvent éventuellement aider.

Fais de préférence confiance au test en ligne, il reproduit plus
fidèlement ce qui se passe chez un hébergeur que ne le fait un test en
local chez toi.

Je suppose que tu connais déjà ce qui suit, mais au cas où :

Pour IE, il existe une série de fonctions Javascript pour corriger les
comportements non conformes en matière de CSS, tu peux regarder ici
(désolé, c'est en anglais) :
https://code.google.com/p/ie7-js/

D'autres informations en français là :

http://creapage.net/blog/2012/techniques/html-5-et-css-3-sur-internet-explorer-6-7-8

Les commentaires conditionnels permettent également de définir des
règles spécifiques pour les différents IE (typiquement les mauvaises
interprétations de margin et padding) :

http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html

L'idée générale est de proposer des CSS conformes aux standards, et
d'utiliser des ruses ponctuelles pour assurer la compatibilité avec les
IE.

Pour ma part, après y avoir eu recours pendant des années, j'ai
définitvement renoncé à tout ça. J'indique dans un coin qu'en cas de
problèmes d'affichage avec IE, Firefox ou Chrome s'installent en 5
minutes et basta.

Bon courage.
Avatar
alainL
Le 22/03/2015 18:12, SAM a écrit :
Le 22/03/15 17:34, alainL a écrit :

J'ai voulu enlever dans <li.plus> la mention { background-image:
url(illustrations/fdroite.gif);} mais le bug revient....



Pourtant ... cette image n'existe pas !!!

NetworkError: 404 Not Found
- http://alos-sibas-abense.com/illustrations/fdroite.gif"



Cordialement,



Bonjour,
Eh oui, je l'ai cherchée cette image... Bon, ça va encore allonger la
série de ce que je ne maîtrise pas :-))

Allez, deux dernières:

-1- comment enlever (sur IE) le commentaire en haut du menu ? <!--[if
IE7]> <![endif]-->
(mais je crois que je vais prendre la solution d'Eric et conseiller
d'utiliser Ffx ou Chr )

-2- pour récupérer l'usage normal de <li> que j'utilise ailleurs, j'ai
voulu créer une classe avec la forme du <li> qui marchait bien dans le
<style> du menu.
J'ai remplacé
< li {list-style-type: none; position: relative; width: 120px; padding:
2px; margin: 0px; line-height:30px} >
par
< li.haute {list-style-type: none; position: relative; width: 120px;
padding: 2px; margin: 0px; line-height:30px} >

J'ai refait le code html du menu...
....Eh bien, cette fois, ça marche comme je veux dans IE mais Ffx ou Chr
me collent des puces pas belles dans le sous menu !!!

http://alos-sibas-abense.com/bulletins2.php
--
AlainL

http://autourdalos.fr
Avatar
SAM
Le 23/03/15 18:10, alainL a écrit :

J'ai refait le code html du menu...
....Eh bien, cette fois, ça marche comme je veux dans IE mais Ffx ou Chr
me collent des puces pas belles dans le sous menu !!!



c'est au UL qu'il faut indiquer "non-liste-style" !!!

#menu ul { list-style: none; margin: 0; padding: 0; width: 120px; }

#menu li { margin: 0; padding: 0; position: relative; }
#menu li ul { display: none; position: absolute; left: 120px; top: 0;
background: gold; }
#menu li:hover, #menu li.ie { background: gold; }
#menu li:hover ul, #menu li.ie ul { display: block; }
#menu a { display: block; width: 90%; padding: 5%; margin: 0; }
#menu ul ul a:hover { background: rgb(255,230,0); }

http://alos-sibas-abense.com/bulletins2.php



[JS]
function menu() {
var c = this.className;
this.className = c==''? 'ie' : ''; // bascule (toggle en anglish)
}
var ie = /*@cc_on!@*/false; // 'vrai' seulement pour les IE<11, hop!
onload = function() {
if(ie) { // mouse-out/over sur les LI pour les IE
var m = document.getElementById('menu').getElementsByTagName('LI'),
n = m.length;
while(n--) {
m[n].onmouseover = menu;
m[n].onmouseout = menu;
}
}
}
[/JS]

C'est du très vilain sniffing de navigateur décrié par les méthodes plus
actuelles mais c'est d'une concision redoutable depuis IE 5 !
Ce JS fera peut-être un peu double emploi sur certaines versions de IE
mais tant pis, et on se passe des commentaires conditionnels du HTML
(surtout si en plus ils ne restent pas en commentaires !!!)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 23/03/2015 23:55, SAM a écrit :
Le 23/03/15 18:10, alainL a écrit :

J'ai refait le code html du menu...
....Eh bien, cette fois, ça marche comme je veux dans IE mais Ffx ou Chr
me collent des puces pas belles dans le sous menu !!!



c'est au UL qu'il faut indiquer "non-liste-style" !!!

#menu ul { list-style: none; margin: 0; padding: 0; width: 120px; }

#menu li { margin: 0; padding: 0; position: relative; }
#menu li ul { display: none; position: absolute; left: 120px; top: 0;
background: gold; }
#menu li:hover, #menu li.ie { background: gold; }
#menu li:hover ul, #menu li.ie ul { display: block; }
#menu a { display: block; width: 90%; padding: 5%; margin: 0; }
#menu ul ul a:hover { background: rgb(255,230,0); }

http://alos-sibas-abense.com/bulletins2.php



[JS]
function menu() {
var c = this.className;
this.className = c==''? 'ie' : ''; // bascule (toggle en anglish)
}
var ie = /*@cc_on!@*/false; // 'vrai' seulement pour les IE<11, hop!
onload = function() {
if(ie) { // mouse-out/over sur les LI pour les IE
var m = document.getElementById('menu').getElementsByTagName('LI'),
n = m.length;
while(n--) {
m[n].onmouseover = menu;
m[n].onmouseout = menu;
}
}
}
[/JS]

C'est du très vilain sniffing de navigateur décrié par les méthodes plus
actuelles mais c'est d'une concision redoutable depuis IE 5 !
Ce JS fera peut-être un peu double emploi sur certaines versions de IE
mais tant pis, et on se passe des commentaires conditionnels du HTML
(surtout si en plus ils ne restent pas en commentaires !!!)



Cordialement,


Bonjour
J'ai essayé tout ça sur http://alos-sibas-abense.com/menuderoul3.html
mais ça ne marche pas...
Pour la présentation du menu, finalement, en ajoutant non-style au
<li.plus> ça le fait ! Là, je crois que je ne vais plus toucher aux li
et aux ul (pour ne pas en rêver la nuit)

Par contre, avec JS, je cafouille lamentablement: sur menu3, ton script
s'affiche intégralement, je ne l'ai sans doute pas bien placé ou déclaré...
sur menu2, je ne vois pas comment faire sauter cette ligne de com <!--if
ie...> si c'est possible ! Je pensais faire monter la fenêtre pour qu'il
sorte de l'écran mais je ne vois pas comment !
--
alainL

http://autourdalos.fr
Avatar
alainL
Finalement, j'ai trouvé une 'tricherie" pour cacher le commentaire !
Logé tout le script dans un <p style="color:#afeeee;font-size:1pt">.
Pas très académique mais je ne le dirai à personne ! ...

Reste un petit truc: avec IE le cadrage est OK et la souris ne perd plus
le focus en passant du niveau1 au niveau2
Mais avec Ffx et Chr, il y a un bout du fond du niveau1 qui dépasse dans
le cadre niveau2... Une histoire de marge ou de padding que les
navigateurs ne traitent pas de la même façon... J'ai essayé un tas de
modifs des marges intérieures, extérieures, des largeurs...mais quand ça
va bien avec Ffx-Chr ça ne va plus avec IE
--
AlainL

http://autourdalos.fr
Avatar
Otomatic
alainL écrivait :

Logé tout le script dans un <p style="color:#afeeee;font-size:1pt">.


Et un <p style="display:none;"> ça ne le ferait pas ?
Avatar
SAM
Le 24/03/15 12:46, alainL a écrit :
Bonjour
J'ai essayé tout ça sur http://alos-sibas-abense.com/menuderoul3.html
mais ça ne marche pas...



pas très étonnant !

1) Il y a une balise HTML de fermeture (facultative normalement)
mais celle *obligatoire*, ouvrante, au début du fichier est oubliée

2) Le code JS (JavaScript) n'est pas mis entre balises SCRIPT
(le script que tu as prévu pour IE<=7 n'a pas l'air mal)

3) et le pire du pire du plus pire !!!! :

<div="menu">

au lieu de :

<div id="menu">


Pour la présentation du menu, finalement, en ajoutant non-style au
<li.plus> ça le fait !



Ben oui ! Quand même !

Mais tu l'aurais déclaré pour les UL du "menu" ou les LI, au lieu de le
faire au compte-goutte pour telle ou telle classe ça aurait fonctionné
tt de suite et beaucoup plus simplement.

Là, je crois que je ne vais plus toucher aux li
et aux ul (pour ne pas en rêver la nuit)



On se demande pourquoi tous ces LI sont assortis de class .... :-(


sur menu2, je ne vois pas comment faire sauter cette ligne de com <!--if
ie...> si c'est possible !



Je n'ai pas regardé ... je ne sais même pas ce que peut bien être ce
menu-2 ... non, je ne le vois pas :-(


S'il existe braiment, ces commentaires qui apparaissent doivent sans
doute être du même topo !!

erreurs d'étourderies ?


par exemple :
1) ligne 143 de la page d'accueil --> </ P> au lieu de </p>
(qui ne prête pas trop à conséquence : balise fermante facultative)
2) 'bulletins2.php' dont les styles sont dans le BODY au lieu du HEAD

Je pensais faire monter la fenêtre pour qu'il
sorte de l'écran mais je ne vois pas comment !



STP ! prière de *NE PAS* bricoler !!!


Au fait, pourquoi mets-tu un div dans le menu pour "centrer" ?
Le menu lui-même ne sait pas le faire tout seul ?




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 23/03/15 18:10, alainL a écrit :

-1- comment enlever (sur IE) le commentaire en haut du menu ?
<!--[if IE7]> <![endif]-->



essayer (en décollant le chiffre) :

<!--[if IE 7]>

???



et même mieux (tout IE < ou = à IE.7) :

<!--[if lte IE 7]>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2 3 4