Menu affichage différent suivant les navigateurs

**Marc31** · 03/02/2017, 16h07

Bonjour,

J'ai testé mon site avec plusieurs navigateurs et il y a toujours des interprétations différentes.

Comment faire pour éviter cela?

Merci et bonne soirée.

**NoSmoking** · 04/02/2017, 12h19

Bonjour,

Comment faire pour éviter cela?

devant cette avalanche d'informations, je dirais il faut faire cela correctement

**Marc31** · 05/02/2017, 11h45

En fait j'ai un menu horizontal et lorsque l'on passe la souris dessus, il y a des sous menus.
Sous menu avec des ombrages et qui sont calés en fonction d'une photo. Sous mozilla c'est nickel mais sous IE, il y a un décalage et l'ombrage n'apparait pas.

**NoSmoking** · 05/02/2017, 19h00

Il est vrai qu'avec ces précisions j'y vois plus clair, je dirais donc que ton code est en cause

**Marc31** · 06/02/2017, 08h52

je mets le code peut être que ça peu aider...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="menu">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
            </td>
            <td>
                <table border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td rowspan="2">
                            <a href="" width="90%" height="85" align="left"></a>
                            <!--242*70-->
                        </td>
                        <td height="20px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul id="menu-demo2">
                                <li><a href="">Menu</a></li>
                                <li><a href="#">Menu</a>
                                    <ul>
                                        <img src="image" width="100%" height="20" align="center">
                                        <li><a href="">Menu</a></li>
                                        <img src="image" width="100%" height="10" align="center">
                                        <li><a href="" target="_blank">Menu</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu</a>
                                    <ul>
                                        <img src="images" width="100%" height="20" align="center">
                                        <li><a href="">Menu</a></li>
                                        <img src="image" width="100%" height="10" align="center">
                                        <li><a href="#">Menu</a></li>
                                        <img src="image" width="100%" height="10" align="center">
                                        <li><a href="">Menu</a></li>
                                    </ul>
                                </li>
                                <li><a href="">Menu</a></li>
                                <li><a href="">Menu</a></li>
                                <li><a href="#">Menu</a>
                                    <ul>
                                        <img src="" width="100%" height="25" align="center">
                                        <li><a href="">Menu</a></li>
                                        <img src="image" width="100%" height="10" align="center">
                                        <li><a href="">Menu</a></li>
                                    </ul>
                                </li>
                                <li><a href="">Contact</a></li>
                                <!--<li><a href="#"><img>" width="31" height="27" align="center"></a></li>-->
                            </ul>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
            </td>
        </tr>
        <tr height="25px">
        </tr>
    </table>
</div>

code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
#menu
{
	border: 0px solid white;
	/*overflow: auto; /*float: left;*/
	margin-right: 0px;
	background-color: #FFFFFF;
	margin-left: 0px;/*10 px*/
	font-family: Arial, Times, sans-serif;
 
 
 
}
 
#menu h3
{
	text-align: center;
	margin: 5px 0 10px 0;
}
 
#menu ul
{
	padding: 0 5px 0 5px;
}
 
#menu-demo2, #menu-demo2 ul{
padding: 0;
margin: 0;
list-style:none;
text-align:center;
font-size: 21px; /* ---22 px taille police menu texte - voir 1.35em--- */
font-family: Arial, Times, sans-serif;
 
}
 
#menu-demo2 li{
display: inline-block; /* --- positionne les boutons de façon horizontal--- */
position:relative;
border-radius:4px 4px 0 0;
 
 
}
 
#menu-demo2 ul li{
display:inherit;
border-radius:0;
 
 
}
#menu-demo2 ul li:hover{
border-radius:0;
 
 
 
}
#menu-demo2 ul li:last-child{
/*border-radius:0 0 8px 8px;*/ /* --- permet de rendre le menu carré--- */
 
 
}
#menu-demo2 ul{
position:absolute;
margin: 36px 0 0 0px; /* --- 38 px 0 0 0px permet de decaler le sous menu--- */
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;		/* --- hidden--- */
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:25em; /* --- Longueur du menu vers le bas defilement--- */
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);*/
/*background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);*/
}
#menu-demo2 li:nth-child(2){
background-color: #FFFFFF;
/*background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);*/
/*background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);*/
}
#menu-demo2 li:nth-child(3){
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);*/
/*background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);*/
}
#menu-demo2 li:nth-child(4){
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);*/
/*background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);*/
}
#menu-demo2 li:last-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);*/
/*background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);*/
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2) li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3) li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(4) li{
background:#FFFFFF;
}
#menu-demo2 li:last-child li{
background:#FFFFFF;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#FFFFFF;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 16px; /*8px ET 16px taille du contenant 32*/
color:#383836;  /* couleur police texte */
font-family:arial;
}
#menu-demo2 ul a{
padding: 8px 0; /* longueur du menu defilant */
 
}
#menu-demo2 li:hover li a{
color:#383836; /* couleur police texte */
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#383836; /* change la couleur de la police texte au survol de la souris */
}
 
#menu-demo2 a:focus
{
	color: #e20000; /* change la couleur de la police texte au clique de la souris */
}

Invité · 06/02/2017, 15h47

Bonjour,

je doute que tu aies écrit tout le code de zéro...

Je commence déjà par enlever tous les bouts parasites (ceux commentés)
Et aussi les attributs superflus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border: 0px solid white;

border: 0; suffit
...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}

Tu saurais expliquer ça ?
Sinon, à supprimer aussi.

Bref : NETTOIE le code...

N.B. Et là , je ne parle QUE du CSS !
Quand je vois le HTML, avec des <table> dans des <table>...... :

**NoSmoking** · 06/02/2017, 18h09

Je r'ajouterais que ton code est NON CONFORME, exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul>
    <img src="image" width="100%" height="20" align="center">
    <li><a href="">Menu</a></li>
    <img src="image" width="100%" height="10" align="center">
    <li><a href="" target="_blank">Menu</a></li>
</ul>

et que le CSS inline peut te réserver bien des surprises.

Un passage au validateur HTML n'est souvent pas du luxe.

**Marc31** · 07/02/2017, 09h45

Comment puis je améliorer mon code?

**NoSmoking** · 07/02/2017, 18h19

En le rendant conforme, commence par mettre tes <img> dans des balises <li>, ensuite regarde si c'est cela que tu souhaites car personnellement j'ai du mal à voir la finalité de mettre des images à cet endroit.

Invité · 07/02/2017, 20h35

Envoyé par Marc31

Comment puis je améliorer mon code?

Pour compléter NoSmoking, il faut que tu écrives un code (HTML, CSS,...) VALIDE*, c'est-à-dire RESPECTUEUX des règles en vigueur.

Le W3C donne des recommandations à suivre.
Que tu peux tester via : https://validator.w3.org/

* et pas des copier-coller de codes obsolètes, glanés ça et là...

**Marc31** · 08/02/2017, 08h49

Ok je vais faire du nettoyage. En tous cas merci pour toutes les infos.

Menu affichage différent suivant les navigateurs

CSS

Discussions similaires

Partager

Partager