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
alainL
Le 24/03/2015 18:24, Otomatic a écrit :
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 ?



Merci. Oui, ça marche et c'est plus propre !

--
AlainL

http://autourdalos.fr
Avatar
alainL
Le 24/03/2015 20:21, SAM a écrit :
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,



Bon, je vais me tirer une bulle à mon contrôle ! M'en fous si je suis
collé demain, il pleut ! :-)

J'ai "corrigé" menuderoul3.html suivant tes remarques. Ça marche et
c'est vrai, le css est nettement plus simple... Je vais essayer de
l'intégrer demain en allongeant si possible le bloc du 2e niveau (textes
prévus parfois un peu plus longs)

Ce menu est destiné à être inclus dans le body à chaque page du site:

<DOC Type....
<html>
<Head>.........
<link.......
<style...(propre à la page, sauf pour le menu !)
<body>
<?php include("menuderoul2.html");
?>
<div id="contenu">
................

Pour les <li class...> comme il était attribué à <li> un style dans le
css du menu, lorsque je m'en servais dans le reste la page, ils
gardaient le même style. J'ai créé une classe pour les <li> du menu...

Voilà, c'est tout pour ce soir sinon je vais faire encore quelques
petites erreurs d'inattention :-)))))
Bonne nuit
--
AlainL

http://autourdalos.fr
Avatar
SAM
Le 24/03/15 21:40, alainL a écrit :

Pour les <li class...> comme il était attribué à <li> un style dans le
css du menu, lorsque je m'en servais dans le reste la page, ils
gardaient le même style. J'ai créé une classe pour les <li> du menu...



Ben oui,
mais non ...
puisque tu es *dans* #menu !

il suffit alors d'éditer des règles pour les LI, UL et A contenus par menu

#menu ul { blabla }
#menu li { blabla }
#menu a { blabla }


Voilà, c'est tout pour ce soir sinon je vais faire encore quelques
petites erreurs d'inattention :-)))))



Avoue que tu le fais t'exprès !


Il sera prudent d'includer séparément les styles du menu dans le head
(bien que ... linker le fichier 'menu.css' sera tout aussi efficace)
là où tu includeras le fichier 'menu.txt' (le html du div d'id 'menu')




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 24/03/2015 22:40, SAM a écrit :
Le 24/03/15 21:40, alainL a écrit :

Pour les <li class...> comme il était attribué à <li> un style dans le
css du menu, lorsque je m'en servais dans le reste la page, ils
gardaient le même style. J'ai créé une classe pour les <li> du menu...



Ben oui,
mais non ...
puisque tu es *dans* #menu !

il suffit alors d'éditer des règles pour les LI, UL et A contenus par menu

#menu ul { blabla }
#menu li { blabla }
#menu a { blabla }




C'est fait dans la flle de style "feuille_menu.css" appelée dans le head
de "bulletins2.php". Mais IE continue à donner à li:hover le background
color défini pour menu alors que Ffx et Chr ne le font pas.
Autre problème, si le niveau1 ne contient pas de lien mais un simple
texte, plus de niveau 2 !

Il sera prudent d'includer séparément les styles du menu dans le head



J'ai mis une feuille de style en lien ds le head
Ça c'est pour http://alos-sibas-abense.com/bulletins2.php

-----------------------------------------------------------------------

J'ai commencé avec le code que tu m'as passé:
http://alos-sibas-abense.com/bulletins3.php

Là encore, IE fait des manières en n'accordant le focus que au survol du
texte et pas du bloc entier. Donc, perte au passage vers le 2e niveau...

:-(( On n'a pas un métier facile !
--
AlainL

http://autourdalos.fr
Avatar
SAM
Le 25/03/15 17:25, alainL a écrit :

J'ai commencé avec le code que tu m'as passé:
http://alos-sibas-abense.com/bulletins3.php



Il ne devrait pas il y avoir besoin de :
line-height:30px;
la hauteur est réglée par le padding du A

... normalement ? (avec ces IE ... qui pourrait savoir ?)

Là encore, IE fait des manières en n'accordant le focus que au survol du
texte et pas du bloc entier. Donc, perte au passage vers le 2e niveau...



??? c'est le lien qui doit avoir le focus (final) et, normalement, il
remplit toute la place (toute la surface jaune)

Retente en sortant le script des commentaires.


Si ça marche, alors retenter sans étourderie ?
Pour voir ...


Sinon ... faut que ces LI aient le layout :-(
#menu li { zoom: 1; }
par exemple.





indice :
<!--[if lt IE7]>


:-(( On n'a pas un métier facile !







M$ nous dit :
<!--[if lt IE 7]>
ici :
<ttps://msdn.microsoft.com/en-us/library/ms537509%28VS.85%29.aspx#code-snippet-2>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 25/03/15 17:25, alainL a écrit :
Le 24/03/2015 22:40, SAM a écrit :

il suffit alors d'éditer des règles pour les LI, UL et A contenus par
menu

#menu ul { blabla }



C'est fait dans la flle de style "feuille_menu.css" appelée dans le head
de "bulletins2.php". Mais IE continue à donner à li:hover le background
color défini pour menu



Quelle version de IE ?

les "vieux" IE ne connaissent le pseudo style :hover que pour les A
partout ailleurs (LI ou autres) ça ne fonctionne pas


C'est pourquoi on prévoit :
- une class 'fond jaune'
- un JavaScript qui :
* régit une fonction de changement de class
* attribue cette fonction aux événements mouseover mouseout sur les LI


J'imagine que ça ne fonctionne pas dans 'bulletin2' à cause de
l'étourderie évoquée aux posts précédents ?
(séparer le chiffre de 'IE' dans le <!--[if ... )


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Pierre Maurette
alainL :

[...]

<DOC Type....
<html>
<Head>.........
<link.......
<style...(propre à la page, sauf pour le menu !)
<body>
<?php include("menuderoul2.html");
?>
<div id="contenu">
................

Pour les <li class...> comme il était attribué à <li> un style dans le css du
menu, lorsque je m'en servais dans le reste la page, ils gardaient le même
style. J'ai créé une classe pour les <li> du menu...

Voilà, c'est tout pour ce soir sinon je vais faire encore quelques petites
erreurs d'inattention :-)))))



Oui. Il manque "ul" dans un coin...

--
Pierre Maurette
Avatar
SAM
Le 25/03/15 20:07, SAM a écrit :

J'imagine que ça ne fonctionne pas dans 'bulletin2' à cause de
l'étourderie évoquée aux posts précédents ?
(séparer le chiffre de 'IE' dans le <!--[if ... )



Je me suis décidé à essayer ces pages bulletin 2 et 3 dans mon IE sur
mon NetBook Windows 7 starter ... (le pôvre !)

Houlala dis donc ! Y a un débogueur qui semble génial !
(quand il ne plante pas tout IE !!)
et sous ce qui parait être IE 7 ou 8 ou 10 ... tout baigne !
sous-menus pour tous !
L'étourderie ne serait pas rédhibitoire !!!???

Nota:
dans le "débogueur" je ne suis pas parvenu où trouver le moyen de
changer le code, mettre un signal sur la fonction mouse-over/out, et ne
suis pas certain que le JS a vraiment agi avec IE.simulé.7

Il n'y a que sous IE.5 que je n'ai pas les sous-menus ...



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 26/03/2015 15:03, SAM a écrit :
Le 25/03/15 20:07, SAM a écrit :

J'imagine que ça ne fonctionne pas dans 'bulletin2' à cause de
l'étourderie évoquée aux posts précédents ?
(séparer le chiffre de 'IE' dans le <!--[if ... )



Je me suis décidé à essayer ces pages bulletin 2 et 3 dans mon IE sur
mon NetBook Windows 7 starter ... (le pôvre !)

Houlala dis donc ! Y a un débogueur qui semble génial !
(quand il ne plante pas tout IE !!)
et sous ce qui parait être IE 7 ou 8 ou 10 ... tout baigne !
sous-menus pour tous !
L'étourderie ne serait pas rédhibitoire !!!???

Nota:
dans le "débogueur" je ne suis pas parvenu où trouver le moyen de
changer le code, mettre un signal sur la fonction mouse-over/out, et ne
suis pas certain que le JS a vraiment agi avec IE.simulé.7

Il n'y a que sous IE.5 que je n'ai pas les sous-menus ...



Cordialement,



Les fichiers en ligne marchent correctement chez toi ? Je viens de les
essayer avec mes trois navigateurs installés, voici le résultat :
--------------------------------------------------------------------
bulletins2 avec l'onglet "album d'images" juste en texte (pas en lien)
(utilise feuille_menu.css et menuderoul2.html)

- Ffx, Chr : bien, juste un petit débord de la zone colorée de niveau 1
dans le bloc niveau 2

- IE8 : n'ouvre pas niveau 2 ???? et <li> utilisés ailleurs dans la
page restent colorés au survol.

---------------------------------------------------------------------
bulletins3 avec l'onglet "album d'images" juste en texte (pas en lien)
(utilise feuille_menu_sam.css et menuderoul3.html)

la place allouée au div "menu" est la marge gauche de 20% du div
"contenu" de chaque page.
Je suis forcé de caler un peu à gauche mais là, c'est un peu trop !

- Ffx et Chr : fonctionne mais hauteurs des lignes inégales (1 et2)

- IE8 : longueur des blocs allouée au niveau1 insuffisante--> onglets
sur deux lignes / seul le texte est sensible au survol impossible
d'aller sur niv2 / hauteurs inégales


-------------------------------------------------------------------

Pour couronner le tout, j'avais un bulletins2 qui tournait à peu près
sous les trois et hier soir tard, à force de bidouiller et d'essayer en
enregistrant les modifs... je ne le retrouve plus !!!


Cordialement,
--
AlainL
Avatar
SAM
Le 26/03/15 16:15, alainL a écrit :
Le 26/03/2015 15:03, SAM a écrit :
Je me suis décidé à essayer ces pages bulletin 2 et 3 dans mon IE

Houlala dis donc ! Y a un débogueur qui semble génial !
(quand il ne plante pas tout IE !!)



Les fichiers en ligne marchent correctement chez toi ?



Je ne sais pas, vu que je ne sais pas ce que tu veux exactement.
Pour moi ça marche,
correctement ? ... faut pas exagérer non plus !

Je viens de les
essayer avec mes trois navigateurs installés, voici le résultat :
--------------------------------------------------------------------
bulletins2 avec l'onglet "album d'images" juste en texte (pas en lien)
(utilise feuille_menu.css et menuderoul2.html)



De mémoire, le menu qui a des sous-menus :
- n'est pas souligné
- est tiré fort vers la gauche (+ que les autres)
pas regardé ce que faisaient les css (trop compliqué pour moi sous
Windows et avec ce tout petit NetBook)

voir la suite ...

- Ffx, Chr : bien, juste un petit débord de la zone colorée de niveau 1
dans le bloc niveau 2



?
Ce soir, bulletins2 avec Fx :
- Album d'images :
- sur une ligne
- pas surligné
- à gauche comme les autres
- au survol : léger débord du fond coloré sur sous-menus
normal puisque :
#menu li { width: 125px; }
#menu ul ul { border: 2px solid yellow; left: 125px; }
il faut ici rajouter l'épaisseur du bord
left: 127px; ou mieux, 128


- IE8 : n'ouvre pas niveau 2 ???? et <li> utilisés ailleurs dans la
page restent colorés au survol.



Là je ne puis pas grand' chose ...
Voici ce qu'en dit M$ :
<https://msdn.microsoft.com/fr-fr/library/ie/cc848866%28v=vs.85%29.aspx>
IE.7 (et par là les autres + récents) comprend les CSS.2.1 et devrait
réagir correctement au :hover
... sous certaines conditions !
IE est en mode "strict" (standards-compliant mode)
à ce que je comprends, il faut être en HTML.5
<!DOCTYPE html>
et non pas en HTML.4 transitionnel :-(
M$ dit aussi qu'il ne faut pas organiser sa FdS n'importe comment et que
:hover doit être déclaré pour un élément après les autres pseudo-class (
:active :link :visited)
Mébon, on le savait déjà n'est-ce pas ? (ce n'est pas propre à IE)

---------------------------------------------------------------------
bulletins3 avec l'onglet "album d'images" juste en texte (pas en lien)
(utilise feuille_menu_sam.css et menuderoul3.html)

la place allouée au div "menu" est la marge gauche de 20% du div
"contenu" de chaque page.



Tu peux bien mettre 10 ou même 5 %, vue la marge gauche des trucs
encadrés ! ;-)

Si tu déplaces le html de ton menu après le <div align="center"> (que je
sais pas à quoi il sert)
Les sous-menus s'afficheront alors par dessus le reste

Je suis forcé de caler un peu à gauche mais là, c'est un peu trop !



Ouaip !

Pour le menu par-dessus le reste,
au lieu de le déplacer tu peux aussi rajouter aux CSS :
#menu ul { z-index: 1; }
Comme ça tu ne te casses plus le tronc avec des 120px ou des 125px et tu
mets
- largeur menu (UL) à 17% + marge-gauche à 2%
- #contenu reste avec marge-gauche 20%

- Ffx et Chr : fonctionne mais hauteurs des lignes inégales (1 et2)



il faut :
1) en html :
<li>
<span>Album d'images</span>
<ul>
.../...
2) en CSS (FdS à SAM) :
#menu a,
#menu span { display: block; width: 90%; padding: 5%; margin: 0; }
3) virer ce que tu as rajouté à la FdS à SAM, ligne 5
line-height:30px;

- IE8 : longueur des blocs allouée au niveau1 insuffisante--> onglets
sur deux lignes / seul le texte est sensible au survol impossible
d'aller sur niv2 / hauteurs inégales



Voir remarque précédente.
Change le doc-type pour voir à voir si ...

-------------------------------------------------------------------

Pour couronner le tout, j'avais un bulletins2 qui tournait à peu près
sous les trois et hier soir tard, à force de bidouiller et d'essayer en
enregistrant les modifs... je ne le retrouve plus !!!



Ce bulletins2 n'a plus de JavaScript pour béquiller les IE poussifs ...
Modifier le doctype ?




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