css, z index et explorer
Bonsoir à tous,
et merci de votre aide.
j'ai un souci qui est ma vilaine bébêtte noire : les problèmes entre les styles css et les compatibilités avec les navigateurs, et en particulier explorer...
j'ai créé un menu déroulant, qui affiche en sous-menu une requête php (le menu est dynamique).
sous firefox tout est ok, sous explorer j'ai deux problèmes :
1- lorsque l'intitulé du sous-menu est long, tout se décale à droite
2- à gauche, le sous-menu se déroule sous le menu de gauche.
je me suis donc tournée vers les z-index...
il y a un truc que je ne comprends pas : dans les tutos j'ai trouvé que plus le nombre est petit, plus le style est dessus.
or, si je met -1 pour le style de mon menu (haut) et 1 pour le style du menu gauche, sous firefox mon menu haut passe sous le menu gauche...
explorer, lui, reste impassible dans les deux cas.
voici un lien vers ma page :
http://www.petite-fee.fr/exupery/index.php
et un bout de code css :
#menu {
z-index:1;
background: #1E1E1E;
height: 28px;
border: 1px solid grey;
border-top: 0;
border-radius: 0 0 5px 5px;
}
#menu ul {
z-index:1;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
z-index:1;
float: left;
line-height: 25px;
font-weight: bold;
margin:auto;
padding:0;
}
#menu a {
z-index:1;
margin-left: 35px;
margin-right: 30px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
#menu a:hover {
z-index:1;
color: #4c7391;
}
#menu li a {
z-index:1;
display:block;
color:white;
text-decoration:none;
background-color:black;
text-align: left;
}
#menu li a:hover {
z-index:1;
color:#FFD700;
}
#menu ul li ul {
z-index:1;
display:none;
}
#menu ul li:hover ul {
z-index:1;
display:block;
}
#menu li:hover ul li {
z-index:1;
float:none;
}
body {
z-index:-1;
background: #1F2835 url('img/bg.png') top left repeat-x;
text-align: left;
font-family: Baumans;
font-size: 0.9em;
margin: 0;
}
a img {
border: 0;
}
#container {
z-index:-1;
margin: 20px auto 20px auto;
color: white;
width: 1000px;
text-align: justify;
}
#menu_g {
z-index:-1;
float: left;
width: 190px;
margin-right: 20px;
}
#menu_g .cadre a, #menu_d .cadre a {
z-index:-1;
color: white;
}
#menu_g .cadre a:hover, #menu_d .cadre a:hover {
z-index:-1;
color: #4c7391;
}
#menu_g .cadre-header, #menu_d .cadre-header {
z-index:-1;
border: 1px solid #CCC;
height: 35px;
font-weight: bold;
line-height: 35px;
padding-left: 5px;
color: white;
background: #1e1e1e;
border-radius: 5px 5px 0 0;
}
#menu_g .cadre, #menu_d .cadre {
z-index:-1;
padding: 5px;
padding-bottom: 1px;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
#menu_g .cadre-footer, #menu_d .cadre-footer {
z-index:-1;
border-bottom: 1px solid #CCC;
height: 5px;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
border-radius: 0 0 5px 5px;
margin-bottom: 10px;
}
</style><!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
z-index:1;
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]> <-->
<style type="text/CSS">
#menu li ul {
z-index:1;
position:absolute;
}
</style>
p'tite fée
Bonsoir p'tite fée,
J'ai corrigé le problème du message et j'ai supprimé ton second message de correction.
il y a un truc que je ne comprends pas : dans les tutos j'ai trouvé que plus le nombre est petit, plus le style est dessus.Il doit s'agir d'une erreur dans le tutoriel que tu as vu.
Plus le "z-index" d'un élément est grand, plus l'élément est positionné au dessus des autres.
Un élément "z-index: 10" sera au dessus d'un élément "z-index: 5" qui sera lui même positionné au dessus de l'élément de "z-index: -5".
Attention, cette propriété ne s'applique que sur les éléments "absolute" ou "relative"… et donc dans ton exemple elle ne doit pas avoir d'effet sur certains éléments.
N'ayant pas d'Internet Explorer sous la main, je ne vais pas pouvoir t'aider plus que ça ce soir… mais tu as peut-être quelques pistes à gratter.
Je tenterai de jeter un œuil demain au boulot.
par jules [modérateur],
Tester un programme peut démontrer la présence de bugs, jamais leur absence.
Salut ::
Je penses qu'il y a un pb d’interprétation de tes styles CSS .... IE ne comprends pas la position absolute.
Essaye de la passer directement dans l'attribut style de l'élément pour vérifier.
(jettes un œil sur la console d'IE => F12)
BonCode;)
Autant pour moi ..; je regardais avec IE 9 ... ;) ... et ton hack n'est là que pour IE 8 :D
Donc, déja pour IE 7, c'est le même souci ... :D ...
Pour > IE8, FF, Webkit & Cie, je penses qu'il serait pas mal de remplacer les float:left qui n'ont jamais donné de super rendu et souvent causé plus de tords qu'autre chose mais utiliser des display : inline-block
=> principe : une boite de largeur fixe (ou fixable) mais qui peux etre positionné en ligne avec d'autres éléments inline / inline-block
donc ça c'est pour ta liste de LI en haut. pour chacun tu leur donne un attribut position : relative 'au moins les enfant absolute le seront par rapport à eux ^^
le UL juste dedans position absolute z-index 1000 (ouais j'aime bien placé la barre haute, surtout que dans ce cas de figure, on ne veux pas que qqch vienne au dessus ;) )
tu lui donnes des attribut top (hauteur de ton LI parent) et left (souvent 0 dans ce cas) et normalement le tour et Joué.
En rendant Absolute les enfants direct tu va éviter d'adapter la largeur des parent en fonction de ses enfants et de ce fait éviter de re-balancer les autres LI parents (frères) sur la seconde ligne ;)
J'espère que ça t'as aidé ;) mais Pitié, vires ses float:Left ... :D
BonCode ;)
B'jour jules et Nours,
merci de votre aide, merci nours pour tes explications éclairées.
j'ai modifié les positions absolutes et relatives, les z-index.
concernant les float j'ai fait des recherches sur sur les inline-block, mais mes essais de remplacement font foirer la mise en page, tout se retrouve calé à gauche. comme c'est un problème secondaire et que ça fonctionne bien comme ça je préfère ne pas toucher pour l'instant.
bref, j'arrive PRESQUE au bon résultat.
- le menu se déroule bien au dessus de la page dans les deux navigateurs,
- les intitulés ne partent plus à droite sous explorer.
reste encore un autre problème :
le menu se déroule de façon décalée à droite sous explorer (les fichiers sont à jour sur le lien que j'ai donné dans mon premier message, en passant merci d'avoir corrigé le bug)
MAIS : lorsque j'affiche le site en local tout est parfait.
précision : j'ai récupéré les données de la base en local, pour avoir les mêmes contenus. mes fichiers sont donc les mêmes aussi.
la seule chose qui diffère, c'est le serveur d'évaluation, easy php version 2.6.1 en local, et 5.1.6 sur mon serveur.
la source de mon problème viendrait de l'utilisation d'une expression obsolette...? dans le css, dans le php, dans la balise de déclaration de ma page html...?
slt :
testes
#menu li {
position:relative;
}
#menu li ul {
top:25px;
left:0px;
background-color:black;
}
@++&BonCode;)
bah non... c'est pire.
sous explorer c'est encore plus décallé à droite.
j'ai remis comme avant.
y a t'il un ordre pour mettre les éléments ? j'ai essayé avant et après mes propres codes sans succès.
voici actuellement les deux styles que tu me proposes de modifier :
#menu li {
z-index:1000;
float: left;
line-height: 25px;
font-weight: bold;
margin:auto;
padding:0;
}
#menu li ul {
z-index:1000;
position:absolute;
}
sur ce, je jette l'éponge pour ce soir... bonne nuit !
Bon .... chez moi, actuellement c'est bon sous IE9, IE8
ça merdoi sous IE 7 et en y mettant en live sur les éléments le code que je t'ai mis au dessus, ça fonctionne ....
Donc chez toi c'est quoi qui ne va pas, sous quelle version ?
moi ça merdoie sous explorer 9, mais uniquement sur le ftp, car en local avec ce navigateur tout est ok.
le menu déroulé apparait décalé à droite, plus haut que ce qu'il devrait.
peux-tu me montrer comment tu as modifié le css ?
je te remercie par avance,
... et te souhaite une bonne soirée :o)
Salut ::
désolé, pour le retard...
Donc pour ma part, lorsque je l'ouvre avec IETester, ça à l'air de marcher NIQUEL pour toutes les version >=IE8
Pour faire des tests en live, j'ouvre IE (le navigateur), la console (F12), là tu peux aussi choisir la version du moteur d’interprétation de IE que tu souhaites utiliser (rétrocompatibilité de IE avec les vielle versions... :@)
Mais tu peux aussi sélectionner un élément dans le DOM, et lui ajouter des attribut (ici : tu t'en doute ^^ style ;) ) une tab et tu rentre la valeur, donc tu peuix en live ajouter du style à tes éléments, ce n'est pas aussi pratique que sous webKit ni avec fireBug, mais ça existe !
Tu peux aussi voir si tes Hacks de versions sont bien pris en compte car tu as pour l'élément courant l'empilage des propriétés CSS appliquées.
BonCode;)